CODEWITHSUNDEEP
angulardata-bindingngfor
Danyg
Danyg

Reputation: 73

ngFor without data binding

How do I use the *ngFor directive without any data binding?

Besides the initial rendering, I don't want any changes to the model to be reflected in the view and I don't want any changes in the view to be reflected in the model.

Example

@Component({
  template: '<p *ngFor="let character of characters">{{ character }}</p>',
})
export class TestComponent {
  public characters = ['a', 'b', 'c'];
}

If I push an additional character onto the characters array it will render in the template.

I don't want this. I only want it to render once (with the first 3 characters) and any modification should not cause any changes in the view.

Upvotes: 0

Views: 778

Answers (1)

Ashish Ranjan
Ashish Ranjan

Reputation: 12950

As far as not reflecting any change in model to the the view after initial load is concerned, then you can use a different variable to loop over in your template..

@Component({
  template: '<p *ngFor="let character of initialCharacters">{{ character }}</p>',
})
export class TestComponent {
  public characters = ['a', 'b', 'c'];
  public initialCharacters = this.characters.slice();
}

Upvotes: 1

Related Questions