Router link active is not working properly with ngModel

Question

I am working with routing and using routerLinkActive to make a link active. Link is not activated when using ngModel in html.

This is the exact scenario..

In component I am calling web service which returns an object or array of objects. In html I am using ngModel for the fields of the object. Router link active works fine if i am using direct fields like string or number. But it is not working when I am trying to access the fields from the object.

It's weird.

Here is what I am trying to do.

ts:

export class MyComponent implements OnInit {
    headers;
  allLogs: Array<any> = [];
  selectedEntry: any;

    ngOnInit() {
        var token = localStorage.getItem('x-auth-token');
        this.headers = new Headers({
           'x-auth-token' : token
        });
        this.getData(this.headers);
    }

    getData(headers){
      this.exampleProvider.getAllEntries(headers)
      .subscribe(
        data => {
          this.allLogs = JSON.parse(data['_body'])
          this.selectedEntry = JSON.parse(JSON.stringify(this.allLogs[0]))
        },
        error => {
        }
      );
  }

  updateDate(event){
  }

}

html:

<p>{{selectedEntry | json}}</p>

<input class="form-control" type="date" [ngModel]="selectedEntry.date" name="selectedDate" (ngModelChange)="updateDate($event)">

When I use selectedEntry in ngModel then it works fine and after retrieving date it's not working.

Need help.

Answer 1

Since getData() is a asynchronous call.

Before the call is successful selectedEntry will be null.

So you can do either of these things

1. Hide input field using

<input class="form-control" *ngIf="selectedEntry!=null" type="date" [ngModel]="selectedEntry.date" name="selectedDate" (ngModelChange)="updateDate($event)">

OR

2. Replace

selectedEntry:any;

with

selectedEntry:any={
    date:''   
}