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: 
The solution to this problem was an incorrect implementation of the router.

I was routing to this component from my main component using an onClick router.navigate(). Routing this way, don't know why, seemed to route correctly to the destination,it would create any static labels/buttons/etc. but not any that are depended on \*ngFor(even \*ngIf wouldn't work).

In summary , using a [nsRouterLink] for navigation instead of router.navigate() fixed my code.
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")
    }
}

```