add string by interpolation to element in angular template

Question

Let's say I have three components like these ones here in my template

<app-student-dave></app-student-dave>
<app-student-olga></app-student-olga>
<app-student-jason></app-student-jason>

Now I have an array with all these names. So instead of using the names directly, I want to use the array. Something like this:

<app-student-{{myArray[selectedName]}}></app-student-{{myArray[selectedName]}}>

But string interpolation does not work this way. Any idea how implement this in angular2 and above?

brijmcq · Accepted Answer · 2017-09-04 00:21:04Z

2

Why not use @Input to pass the name of the student?

You can do something like this

export class StudentComponent {
 @Input() studentName:string;
 //....
}

And you can use it like this

  <app-student [studentName]="dave"></app-student>
  <app-student [studentName]="olga"></app-student>
  <app-student [studentName]="jason"></app-student>

You can refactor it further if you have an array like this

 studentNames:string[] = ['dave','olga','jason'];

And use a *ngFor in your template.

 <div *ngFor="let studName of studentNames>
      <app-student [studentName]="studName"></app-student>
  </div>

answered Sep 4, 2017 at 0:21

brijmcq

3,4182 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zze Over a year ago

I second this as it supports the angular design methodology which is to mitigate DOM manipulation by properly templating as this answer demonstrates.

Sheldon Over a year ago

Ok, I overcomplicated this issue. Your approach is the way to go, thanks

Vova Bilyachat · Accepted Answer · 2017-09-04 00:03:44Z

I am not sure if its possible this way, but I did similar thing in other way

In template add

 <ng-template #target></ng-template>

In component code

@ViewChild("target", { read: ViewContainerRef }) target;

private createComponent(type: Type<{}>) {
    let compFactory = this.cfr.resolveComponentFactory(type);
    return this.target.createComponent(compFactory);
}

private init(){
  this.target.clear();
  //loop here 
  var component = this.createComponent(StudentDave);
  //here you can listen component.OnEvent.Subscribe 
  //Or even component.student = {name: "Olga", grade: 2};
}

But i think your question is a bit wrong basically you should have 1 StudentComponent which will accept @Input student; So you will always create same component but assign different inputs

Collectives™ on Stack Overflow

add string by interpolation to element in angular template

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related