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?
 
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
 
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
 
Frank DannyAuthor Commented:
Thank you@Julian...that all I wanted
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.