Multiply providers in directives Angular2-4

Question

How to apply both * to string. I have next code

<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>

and I need apply *showAuthed="false" to <a>

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;
  }

}

Code from https://github.com/gothinkster/angular-realworld-example-app & sidebar from http://preview.themeforest.net/item/fury-angular-2-material-design-admin-template/full_screen_preview/19325966?_ga=2.3033968.178803556.1494586718-118953069.1493279302

What's the problem? What does "both * to string" mean? You can't add two structural directives to the same element. — Günter Zöchbauer, May 12 '17 at 11:01
You can use `
` to work around this limitation. `` won't be added to the DOM. — Günter Zöchbauer, May 12 '17 at 11:11

score 0 · Answer 1 · answered May 12 '17 at 11:29

Check this way:

// <ng-template> for ng4
<template [showAuthed]="false">
<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>
</template>

Multiply providers in directives Angular2-4

1 Answers1