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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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