How to print in HTML the default value from constructor

user_218349 0
Viewed 129

I am trying to set a default value from the constructor params, and trying to print in html. but getting error as

No suitable injection token for parameter 'name' of class 'AppComponent'.
Consider adding a type to the parameter or use the @Inject decorator to specify an injection token.

not able to understand. any one help me here. my code:

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(public name = 'Angular') {} //default value moved with constructor
}

what is wrong here or how to handle this kind of issue? How to parameterise a value in component? Thanks in advance.

Live demo

angular
2 Answers

You can take a look at the component class as somehow a special one, constructor should be used for DI, like injecting services for example.

You can use an @Input for you scenario with a default value for example.

If you really want to do this you should create an injectable variable wich will be registered so de DI would know what to inject, for this you need to create an opaque token for example.

const injectableToken= new OpaqueToken('token_name'); ... export class AppComponent { constructor(@Inject(injectableToken) public name: injectableToken) { ... } }

user_182973380

Your attempt at parameter properties would work in Typescript.

export class AppComponent {
  constructor(public name = 'Angular') {
    const appDiv: HTMLElement = document.getElementById('app');
    appDiv.innerHTML = name;
  }
}

new AppComponent();

However Angular has a special meaning for the constructor parameters. Angular employs a dependency injection mechanism through the constructor parameters. To use it, you'd need to inject a token that could then be used by the component.

  • One use case is to inject run-time configuration constants.
  • Another well known use case is to use the @Injectable() decorator to make a class injectable. More commonly they are used as Angular services.

Rudimentary example:

import { Component, InjectionToken, Inject } from '@angular/core';

export const NAME = new InjectionToken<string>('');

@Component({
  selector: 'my-app',
  template: `<hello name="{{ name }}"></hello>`,
  providers: [{ provide: NAME, useValue: 'Angular' }],
})
export class AppComponent {
  constructor(@Inject(NAME) public name) {}
}

I've adjusted your Stackblitz

Or if you do not wish to dabble with dependency injection, you could forgo it and use plain parameter initialization.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<hello name="{{ name }}"></hello>`,
})
export class AppComponent {
  public name = 'Angular';
}

Working example: Stackblitz

user_65139210
Related