Question: I am creating this mobile app where i have to list a few labels.
The code looks like this:

```ts
@Component({
    selector: 'code-m',
    template: `
                <StackLayout dock="top" orientation="vertical" style="height:90%;" backgroundColor="lightgray">
                    <label text="Code Methods" style="background-color:red;"></label>
                    <Label *ngFor="let item of items" [text]="item"></Label>
                    <label text="test" style="background-color:blue;"></label>
                </StackLayout>
        `
})
export class CodeMethodsComponent{
    public items:Array<string> = [];

    constructor(){
        this.items.push("Default");
        this.items.push("Validation");
        this.items.push("Filter");
        this.items.push("Business");
        this.items.push("Provisional");
        console.log(this.items);
        console.log("test")
    }
}

```

The label with the \*ngFor does not show up at all. Feels like the loop is not working at all. I checked the documentation in Nativescript's website and it seems to have and older deprecated version(using # instead of let) which does not work either. I would really appreciate it if you could guide me through my mistake and if possible suggest me a place(other than Nativescript's website) to get help.

It is fair to mention that the first and last label are showing up correctly.

[EDIT]
It seems at `*ngFor="let item of items` it doesn't recognize the items array. Tried extrapolating it with {{}} but got an error for doing so.

Answer: 
I reviewed the given example and found that you should use `ChangeDetectionStrategy.OnPush`, which to allow `view` to trigger all changes, when new values has been pushed in the array. You could also review the example below. 

`app.component.html`

```
<StackLayout dock="top" orientation="vertical" style="height:90%;" backgroundColor="lightgray">
        <label text="Code Methods" style="background-color:red;"></label>
        <Label *ngFor="let item of items" [text]="item"></Label>
        <label text="test" style="background-color:blue;"></label>
</StackLayout>

```

`app.component.ts`

```
import {Component, ChangeDetectionStrategy} from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
    public items:Array<string> = [];

    constructor(){
        this.items.push("Default");
        this.items.push("Validation");
        this.items.push("Filter");
        this.items.push("Business");
        this.items.push("Provisional");
        console.log(this.items);
        console.log("test")
    }
}

```
I am not sure how your data looks like in the list, but try this with the repeating label:

```
<Label *ngFor="#item of items" [text]="#item"></Label>

```

or

```
<Label *ngFor="#item of items" [text]="#item.someproperty"></Label>

```

UPDATE: Same example shown here from the official documentation
<https://docs.nativescript.org/angular/ui/list-view.html#using-an-item-template>