CODEWITHSUNDEEP
angular
user2004
user2004

Reputation: 1973

load component after selecting an option

I have 4 components - dashboard(parent) and sidenav, activate, deactivate after selecting an option from sidenav, i want dashboard to load activate/deactivate component.

how to send the selected option from sidenav to dashboard?

i have tried to emit an event for optionSelected but doesn't work this is what i tried so far

dashboard.component.ts

 export class DashboardComponent implements OnInit {

      options = [ACTIVATE_VENDOR, DEACTIVATE_VENDOR]; 

      constructor() { }

      ngOnInit() {

      }

dashboard.component.html

 <breadcrumbs></breadcrumbs>
    <div class="row vertical-center">
        <div class="col-3">
            <app-navigation (optionSelected)="selectOption($event)"></app-navigation>
        </div>

        <div *ngIf="optionSelected == options.ACTIVATE_VENDOR" class="col-9">
            <app-activate-vendor></app-activate-vendor>
        </div>
        <div *ngIf="optionSelected == options.DEACTIVATE_VENDOR" class="col-9">
            <app-deactivate-vendor></app-deactivate-vendor>
        </div>
    </div>

nav.component.ts

export class NavigationComponent implements OnInit {

  @Output() optionSelected: EventEmitter<any> = new EventEmitter();
  options = nav_links;

  constructor() { }

  ngOnInit() {
  }

  selectOption(option) {

    this.optionSelected.emit(option);
  }

nav.component.html

<ul class="list-group">
    <li *ngFor="let option of options" class="list-group-item">{{option.title}}</li>
</ul>

Upvotes: 0

Views: 289

Answers (1)

bryan60
bryan60

Reputation: 29355

seems like you're missing some pieces... you need to capture the click in your nav component so something can trigger the emit:

<ul class="list-group">
    <li *ngFor="let option of options" class="list-group-item" (click)="selectOption(option)">{{option.title}}</li>
</ul>

not sure if the whole option should be emitting here or just a property of it, and then you need to handle the event in your dashboard component:

  options = [ACTIVATE_VENDOR, DEACTIVATE_VENDOR]; 

  constructor() { }

  ngOnInit() {

  }

  optionSelected: any;

  selectOption(option) {
    this.optionSelected = option;
  }

this way you've actually connected the event emitter to something in the receiving component.

Upvotes: 1

Related Questions