Angular components injection issues

Question

I am currently experiencing a problem using the principles of component injection in angular. I have a header component that must use in another I called WelcomePage Component. My goal is that the header component can use the methods and properties of its parents. To do this I created the following abstract class:

export abstract class WelcomeInterface {
default: any;
languagesSorted: any;
/**
 * Change app language
 * @param langSelect language choice
 */
abstract onChangeLang(langSelect: string): void;

}

Then the WelcomePage class implements WelcomeInterface. I also added a provider to the parent component, to allow these methods to be used by Header after its injection.

here is the Welcome-page component

@Component({
  selector: 'app-welcome-page',
  templateUrl: './welcomePage.component.html',
  providers: [{ provide: WelcomeInterface, useClass: forwardRef(() => WelcomePageComponent) }]
})
/**
 * *summary
 *
 * *summay
 */
export class WelcomePageComponent  implements OnInit, OnDestroy, WelcomeInterface {
  getPaySubscription: Subscription;
  default: { value: string, flag: string };
  languages = new Array<{ value: string, flag: string }>();
  languagesSorted = new Array<{ value: string, flag: string }>();
  isClosed: boolean;
  loading: boolean;
  urlJson = './assets/i18n/languages.json';
  paymentMode: string;
  orderId: any;
  image: string;
  paymentModeConstants = AppConstants.paymentModes;
  routerEventSubscription: Subscription;
  navEventSubscription: Subscription;
  ………

The problem I have is that the Header component does not see the update of the properties of WelcomePage in its lifecycle at all. Which causes full display errors in my application.

This is how I wrote the header component

import { Component, OnInit, Input, Optional } from '@angular/core';
import { WelcomeInterface } from 'src/app/models/welcomeInterface';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  constructor(@Optional() public welcomePage: WelcomeInterface) {
   }

  ngOnInit() {
  }
}

Below the view of my Header component

<header class="header bluegreengradient">
    <div *ngIf="welcomePage" class="control has-icons-left is-right">
        <!-- can display if src= appConfig.settings.appLogo -->
        <div class="select is-small">
            <select #langSelect (change)="welcomePage.onChangeLang(langSelect.value)">
                <option *ngFor="let lang of welcomePage.languagesSorted">{{lang.value}}</option>
            </select>
            <div class="icon is-small is-left">
                <i class="flag-icon flag-icon-{{ welcomePage.default?     welcomePage.default.flag:'earth'}}"></i>
            </div>
        </div>
    </div>
    <div class="container">
        <h1 *ngIf="welcomePage" class="heading1">
            <!-- create img source, add h1 can display if src= appConfig.settings.appLogo -->
            <figure><img alt="logo" [src]="imageSrc"></figure>
        </h1>
        <h2 id="welcome-message" class="heading2 is-uppercase">
            <!-- replace by headerTitle-->
            {{ headerText | translate}}
        </h2>
    </div>
</header>

`that the Header component does not see the update of the properties of WelcomePage in its lifecycle at all.` Can you please reproduce it in stackblitz? — yurzui, Dec 05 '19 at 11:36
this is [example](https://stackblitz.com/edit/angular-efu7hb).I do not understand why I have no items in my list of language choices. The AppCompoent component must be usable. I recall that I am basing myself on the principles outlined in this [link](https://angular.io/guide/dependency-injection-navtree#navigate-the-component-tree-with-di) — agnidé, Dec 05 '19 at 12:11

score 2 · Accepted Answer · answered Dec 05 '19 at 12:44

Your issue is that you use useClass recipe for DI provider while should be using useExisting.

In case of useClass a new instance is created that has no connection to Angular views tree.

useExisting key makes sure that your child components will get the real existing instance of your parent component.

providers: [{ provide: Interface, useExisting: forwardRef(() => AppComponent) }]
                                  ^^^^^^^^^^^
                              take current instance of AppComponent

Stackblitz Example

Athanasios Kataras · Answer 2 · 2019-12-05T12:18:25.233

1

To solve your problem, you need to change the useClass to useExisting like this.

providers: [{ provide: WelcomeInterface, useExisting: forwardRef(() => WelcomePageComponent) }]

Check stackblitz here for proof of concept. That is becaus with the use class, you provide a new object instead of the parent to the child.

This is not the right way to implement two way communication between angular components. You should use @Input and @output to achieve this.

import { Component, OnInit, Input, Optional } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  @Input() languages: [];    
  @Output() valueChange = new EventEmitter();

  constructor() {
   }

  ngOnInit() {
  }

  onSelectChange(value) {
      this.valueChange.emit(value);
  }
}

And in your parent component

<app-header [languages]="sortedLanguages" (valueChange)="onChangeLang($event)"><app-header>

edited Dec 05 '19 at 12:18

answered Dec 05 '19 at 11:05

Athanasios Kataras

25,191
4
32
61

I can use `@input` and `output` but in what the Header component will not be able to use the method of its parent WelcomePageComponent. I wish that Header component uses the methods of his parent. as explained in the official documentation of angular, see the following [link](https://angular.io/guide/dependency-injection-navtree#navigate-the-component-tree-with-di) – agnidé Dec 05 '19 at 11:17
Check the updated answer, I figured out your problem. – Athanasios Kataras Dec 05 '19 at 12:18
thank you so much. it seems to work in stackblitz, I will test it in my project – agnidé Dec 05 '19 at 12:25
Don't forget to upvote/accept usefyul answers! Cheers! – Athanasios Kataras Dec 05 '19 at 12:27

score 0 · Answer 3 · answered Dec 05 '19 at 11:17

Your code is wrong.

In order to communicate two components you should use:

@Input to pass data from the parent to the child and

@Output to trigger events from the child to the parent

In case you wan't to inject some service to your component you can follow this syntax:

@Injectable()
export class MyService { ... }

and inject it into your component like this:

@Component({
   ...
})
export class MyComponent {
   ...
   constructor(private myService: MyService)
}

PS: In case 'MyComponent' have a Module you have to put also your service there, for example:

@NgModule({
    ...
    declarations: [MyComponent],
    providers: [MyService}
})
export class MyModule { }

Angular components injection issues

3 Answers3

Linked