How can i trigger another component based on selection of drop down of another component?

I have used  dynamic form to display drop down on my form.I want when a person select the drop downs to this form  to trigger other component dynamically below this form with text areas and all tag values  based on its model.Can anyone please guide me into the right direction?i am an angular newbie.Please let me know if i need to re-explain more what exactly i need.thanks
Frank DannyAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Leonidas DosasCommented:
Check this simple example:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 - Inline editor</title>
    <script src="https://code.angularjs.org/1.6.9/angular.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body ng-app="myApp">
  <div ng-controller="Controller">
    <form class="form-inline" name="form">
        <div class="form-group">
            <label for="country" class="control-label">Country</label>
            <select name='country' id="country" class="form-control" ng-model="country" ng-options="country as country.CountryName for country in countries" required>
                <option value="" disabled>Select</option>
            </select>
        </div>
        <div class="form-group">
            <label for="state" class="control-label">State</label>
            <select name='state' required id="state" class="form-control" ng-disabled="states.length == 0" ng-model="state" ng-options="state as state.StateName for state in states">
                <option value="" disabled>Select</option>
            </select>
        </div>
        <div class="form-group">
            <label for="city" class="control-label">City</label>
            <select name='city' required id="city" class="form-control" ng-disabled="cities.length == 0" ng-model="city" ng-options="city as city.CityName for city in cities">
                <option value="" disabled>Select</option>
            </select>
        </div>
        <button class="btn btn-primary" ng-disabled='!city.Id' type="button">Create</button>
    </form>
    <p>Selected country: {{country.Id}} - {{country.CountryName}}</p>
    <p>Selected state: {{state.Id}} - {{state.StateName}}</p>
    <p>Selected state: {{city.Id}} - {{city.CityName}}</p>
</div>
    <script>
	
	var myApp = angular.module('myApp', []);

// Define the `PhoneListController` controller on the `phonecatApp` module
myApp.controller('Controller', function PhoneListController($scope) {
  
    $scope.country = {};
    $scope.state = {};
    $scope.city = {};
    var allCountries = [{
        Id: 1,
        CountryName: "USA"
    }, {
        Id: 2,
        CountryName: "Australia"
    }];
    var allStates = [{
        Id: 1,
        StateName: "Washington",
        CountryId: 1
    }, {
        Id: 2,
        StateName: "New York",
        CountryId: 1
    }, {
        Id: 3,
        StateName: "Queensland",
        CountryId: 2
    }];
    var allCities = [{
        Id: 1,
        CityName: "Washington DC",
        StateId: 1
    }, {
        Id: 2,
        CityName: "New York City",
        StateId: 2
    }, {
        Id: 3,
        CityName: "Brisbane",
        StateId: 3
    } ];

    $scope.countries = allCountries;

    $scope.$watch('country', function () {
        $scope.states = allStates.filter(function (s) {
            return s.CountryId == $scope.country.Id;
        });
        $scope.city = {};
        $scope.state = {};
        $scope.cities = [];
    });

    $scope.$watch('state', function () {
        $scope.cities = allCities.filter(function (c) {
            return c.StateId == $scope.state.Id;
        });
        $scope.city = {};
    });

});  
		
		 	
    </script>
</body>
</html>

Open in new window

0
Frank DannyAuthor Commented:
Thanks@Leonidas..................but I was looking  How to create  Depedent  Dropdown fields with Angular 4/5 and not AngularJS.
0
Julian HansenCommented:
It sounds like what you want to conditionally show panels based on a select drop down.

Take this example
Put this in your component html
<select [(ngModel)]="mySelect">
   <option value="panel1">Panel 1</option>
   <option value="panel2">Panel 2</option>
   <option value="panel3">Panel 3</option>
</select>
<div *ngIf="mySelect == 'panel1'">Show Panel 1</div>
<div *ngIf="mySelect == 'panel2'">Show Panel 2</div>
<div *ngIf="mySelect == 'panel3'">Show Panel 3</div>

Open in new window


In your component.ts file add this property
mySelect: string;

Open in new window


When you change the select the panel that is linked to that item will show the others will hide.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Frank DannyAuthor Commented:
Thank you@Julian...that all I wanted
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.