Passage de propriété à un composant dynamique
Bonjour,
Je patauge avec la création de composant dynamique.
Ce que je veux faire c'est un composant responsable pour des radio-boutons que je pourrais utiliser au gré des besoins en lui fournissant à travers des paramètres
les données nécessaires.
J'ai déjà et par hasard réussis, mais pas encore complètement.
Je n'arrive pas à trouver la syntaxe et je travaille avec VSC.
J'ai donc un composant HTML dans son fichier : radio-button-grp.component.html
C'est la clé de mon problème, je cherche a entré une valeur dans ma variable grpName
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<fieldset class="fieldsetDisplay" >
<legend>
{{givenTitle}}
</legend>
<div id="radioButtonGrp">
<div *ngFor="let deMod of givenItems">
<input type="radio"
name= "grpName"
[value] ='deMod'
(change)="radioChangeHandler($event)">
<i id ="ipadding"> {{deMod}} </i>
</div>
</div >
Ici {{grpName }}
</fieldset>
<br> |
J'appelle ce composant avec le selecteur prévu par le Framework :
C'a marche pour ce qui est du tableau titleGranularity, pour le titre cela ne marche pas comme je veux,
car je voudrai pouvoir affecter la valeur du string dans le Controller. De plus cest juste un texte et non pas une propriété des inputs
Code:
1
2
|
<app-radio-button-grp grpName='granGrpName' titleName= 'Granularity ' [givenItems]= "titleGranularity" ></app-radio-button-grp> |
Ici j'ai la class de mon composant, comme dit en bricolant j'ai trouver la syntaxe pour le tableau givenItems, mais pas pour mon grpName.
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
28
29
30
31
|
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-radio-button-grp',
templateUrl: './radio-button-grp.component.html',
styleUrls: ['./radio-button-grp.component.css']
})
export class RadioButtonGrpComponent implements OnInit {
public var : string;
@Input('titleName') givenTitle : string;
@Input() givenItems : string [];
@Input('grpName') givenGrpName : string;
constructor() { }
ngOnInit() {
this.givenGrpName="voila";
}
radioChangeHandler(event : any) {
console.log(event.target.value);
}
} |
Ici j'ai une classe parent qui utilise on composant de radio bouton, j'attribue mes valeur dans les variables ici. Ce doit pas être trop faux, car je peux
afficher mes groupes de boutons
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
28
29
30
31
|
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-summary',
templateUrl: './summary.component.html',
styleUrls: ['./summary.component.css']
})
export class SummaryComponent implements OnInit {
titleViews = ["Employee", "Group", "Project"];
deDisplayMode = ['List', 'Tree'];
titleGranularity = ["Day", "Week", "Month"];
granGrpName : string="granularityRBGroup";
viewsGrp="viewsRBGroup";
selectedItem: string = '';
constructor() { }
ngOnInit() {
}
radioChangeHandler(event : any) {
console.log(event.target.value);
}
} |
Ici dessous et pour finir un debug avec Chrome qui montre que le contenu de ma variable grpName ne recoit pas le contenu désiré :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<app-radio-button-grp _ngcontent-c1="" grpname="granGrpName" titlename="Granularity" _nghost-c2="" ng-reflect-given-title="Granularity" ng-reflect-given-items="Day,Week,Month" ng-reflect-given-grp-name="granGrpName">
<fieldset _ngcontent-c2="" class="fieldsetDisplay">
<legend _ngcontent-c2=""> Granularity </legend><div _ngcontent-c2="" id="radioButtonGrp"><!--bindings={ "ng-reflect-ng-for-of": "Day,Week,Month" }-->
<div _ngcontent-c2="">
<input _ngcontent-c2="" name="grpName" type="radio" value="Day"><i _ngcontent-c2="" id="ipadding"> Day </i>
</div>
<div _ngcontent-c2="">
<input _ngcontent-c2="" name="grpName" type="radio" value="Week"><i _ngcontent-c2="" id="ipadding"> Week </i>
</div>
<div _ngcontent-c2="">
<input _ngcontent-c2="" name="grpName" type="radio" value="Month"><i _ngcontent-c2="" id="ipadding"> Month </i></div>
</div> Ici
</fieldset>
<br _ngcontent-c2="">
</app-radio-button-grp> |
Merci de votre aide
m
