By using angular routing not getting default route selected

I am using routerLinkActive for default route selected along with this I am also showing image. On initial loading image is not coming. By changing tabs, the image is showing properly.

Below is my code:

app routing file:

export const routes: Routes = [{
path: 'adminsidebar',
canActivate: [AuthGuardService],
component: SidebarComponent,
children: [
{
path: '',
component: ActivityDashboardComponent,
pathMatch: 'full'
},
{
path: 'activitydashboard',
component: ActivityDashboardComponent
},
{
path: 'therapistdashboard',
component: TherapistDashboardComponent
},
{
path: 'reviewapprovaldashboard',
component: ReviewApprovalComponent
},
{
path: 'feedbackdashboard',
component: FeedbackComponent
},
{
path: 'clientdashboard',
component: ClientdashboardComponent
}]
}]


sidebarcomponent.ts:

<li id="activity" [routerLink]="['./activitydashboard']" [routerLinkActive]="['Active']" [ngClass]="rla.isActive?'active':''" #rla="routerLinkActive" class="Active pointer">
<p class="link-items pointer">
<img *ngIf="!rla.isActive" src="/assets/img/activity-blue-retina.png" class="links-img" alt=""> {{ rla.isActive }}
<img *ngIf="rla.isActive" [ngClass]="rla.isActive?'active':''" src="/assets/img/activity-white-retina.png" class="links-img" data-srcset="/assets/img/activity-white@2x.png,/assets/img/activity-white@3x.png" alt="">
<span class="list-labels"> Activity </span>
</p>
</li>


As I have taken two image and displaying on rla.isActive value. On Init rla.IsActive always comes false.

How can I resolve this?

Continue reading...