Is there a way to apply both * to a string? Below is the code snippet I am working with:
<a class="sidenav-anchor" *ngIf="!item.hasSubItems()" md-list-item md-ripple [routerLink]="[item.route]" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<md-icon>{{ item.icon }}</md-icon>
<span class="sidenav-item-name fade-in-on-icon-sidenav">{{ item.name }}</span><span fxFlex><!-- fill space --></span>
<span class="badge fade-in-on-icon-sidenav" *ngIf="item.badge" [style.background-color]="item.badgeColor">{{ item.badge }}</span>
</a>
I also need to add *showAuthed="false" to the <a> element.
Here is the showAuthed code:
import {
Directive,
Input,
OnInit,
TemplateRef,
ViewContainerRef
} from '@angular/core';
import { UserService } from './services/user.service';
@Directive({ selector: '[showAuthed]' })
export class ShowAuthedDirective implements OnInit {
constructor(
private templateRef: TemplateRef<any>,
private userService: UserService,
private viewContainer: ViewContainerRef
) {}
condition: boolean;
ngOnInit() {
this.userService.isAuthenticated.subscribe(
(isAuthenticated) => {
if (isAuthenticated && this.condition || !isAuthenticated && !this.condition) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.clear();
}
}
)
}
@Input() set showAuthed(condition: boolean) {
this.condition = condition;
}
}
You can find the complete code at https://github.com/gothinkster/angular-realworld-example-app and the sidebar design at