Angular2+ composant,templates,typeScript,code à compléter

Je dois créer un simple composant Angular nommé LabelComponent avec label-component pour selecteur.

Il doit afficher un <div> avec la classe label.
Il prend deux entrées, un texte label à afficher et une couleur de texte color.

Ainsi :

Code:

<label-component label='Hello World!' color='red'></label-component>

Doit afficher :

Code:

<div class="label" style="color: red;">Hello World!</div>

Voici le code Angular:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// Angular 8.x code
import { Component, Input, NgModule } from '@angular/core';
 
@Component({
  selector:'...',
  template: `
    <div>Hello World</div>
  `
})
export class LabelComponent {
 
}
 
// #region Preview
@Component({
    template: `<label-component label='Hello World!' color='red'></label-component>`
})
export class PreviewComponent { }
// #endregion Preview
 
// #region Module declaration - Do not Change
@NgModule({
    declarations: [PreviewComponent, LabelComponent],
    entryComponents: [PreviewComponent]
})
export class PreviewModule { }
// #endregion Module declaration

Moi j'ai complété le code de cette façon suivante:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// Angular 8.x code
import { Component, Input, NgModule } from '@angular/core';
 
@Component({
  selector:'label-component',
  template: `
    <div class="label" style="color:red;">Hello World!</div>
  `
})
export class LabelComponent {
 
}
 
// #region Preview
@Component({
    template: `<label-component label='Hello World!' color='red'></label-component>`
})
export class PreviewComponent { }
// #endregion Preview
 
// #region Module declaration - Do not Change
@NgModule({
    declarations: [PreviewComponent, LabelComponent],
    entryComponents: [PreviewComponent]
})
export class PreviewModule { }
// #endregion Module declaration

Est ce qu'il y'a d'autres endroits que je dois compléter encore?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
// Angular 8.x code
import { Component, Input, NgModule } from '@angular/core';
 
@Component({
  selector:'label-component',
  template: `
    <div class="{{label}}" style="color: {{color}};">Hello World!</div>
  `
})
export class LabelComponent {
@Input() label: string;
@Input() color: string;
 
 
}

Merci, mais je ne comprend pas les écritures:
Code:

1 2 @Input() label: string; @Input() color: string;
qu'est ce que c'est?

Code:

1 2 3 @Input() label: string; @Input() color: string;
se sont les entrées, la réception de label et color de l'appel dans la vue: <label-component label='Hello World!' color='red'></label-component>
donc label va contenir: 'Hello World!'
et color: 'red'