CODEWITHSUNDEEP
angularangular6
rds80
rds80

Reputation: 629

Sharing data between components using Service

After a user selects a Navigation item from a drop-down list, the corresponding details of the Navigation item should be populated using textboxes.

I have a navigation component that's used to create the drop-down list and a navigation-detail component to populate the textboxes. For now, I just want to show one of the properties of the navigation in the navigation-detail component. I'm using a service to pass the navigation chosen from the drop-down list to the navigation-detail component.

In the ngAfterViewInit method of navigation-detail.component.ts, I can log to the console any of the properties of the navigation item. However, when I try the same on navigation-detail.component.html, the following error is shown:

Cannot read property 'NavName' of undefined.

Here is the code:

navigation.component.html

<mat-form-field>
  <mat-select placeholder="navigations" >
  <mat-option (click)="sendChangedNav(nav)" *ngFor="let nav of navigations" [value]="nav.Id">
    {{nav.NavName}}
  </mat-option>
</mat-select>
</mat-form-field>
<app-navigation-detail></app-navigation-detail>

navigation.component.ts

import { Component, OnInit, AfterViewInit, Input } from '@angular/core';
import { NavigationService } from '../navigation.service';
import { INavigation } from '../INavigation';
import { ShareAppIDService } from '../share-app-id.service';
import { ShareNavigationService } from '../share-navigation.service';

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements AfterViewInit {
  navigations: Array<INavigation>;

  constructor(private navigationService: NavigationService, private shareAppIdService: ShareAppIDService,
    private sharedNavService: ShareNavigationService) { }

  ngAfterViewInit() {
    this.shareAppIdService.appIdChanged.subscribe((appId) => {
      this.navigationService
        .getNavigations(appId)
        .subscribe(data => {this.navigations = data; });
        console.log(appId);
    });
  }

  sendChangedNav(nav) {
    this.sharedNavService.changeNavigation(nav);
  }
}

navigation-detail.component.html

{{navigation.NavName}}

navigation-detail.component.ts

import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
import { ValueTransformer } from '@angular/compiler/src/util';
import { INavigation } from '../INavigation';
import { ShareNavigationService } from '../share-navigation.service';

@Component({
  selector: 'app-navigation-detail',
  templateUrl: './navigation-detail.component.html',
  styleUrls: ['./navigation-detail.component.css']
})
export class NavigationDetailComponent implements AfterViewInit {
  navigation: INavigation;

  constructor(private sharedNavService: ShareNavigationService) { }

  ngAfterViewInit() {
    this.sharedNavService.navigationChanged.subscribe((navigation) => {
      this.navigation = navigation;
      console.log('navigation detail id is: ' + navigation.NavPageURL);
    });
  }

}

shared-navigation.component.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { INavigation } from './INavigation';

@Injectable({
  providedIn: 'root'
})
export class ShareNavigationService {

  constructor() { }

  private navigation = new Subject<INavigation>();
  public navigationChanged = this.navigation.asObservable();

  public changeNavigation(value) {
    this.navigation.next(value);
    console.log('navigation from changeNavigation service is ' + value);
  }
}

Upvotes: 0

Views: 49

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222552

As mentioned by Ashish use safe navigation operator to handle the undefined error,

{{navigation?.NavName}}

related to the second issue, NgModel' since it isn't a known property of 'input' you need to add FormsModule in your app.module.ts imports.

check this answer.

Upvotes: 1

Related Questions