Estoy tratando de crear una directiva que funcione como ngIf para controlar si el usuario con el permiso correcto puede ver contenido específico, algo como esto:
<div [type-of-user]="load data from the user and check it (normal or premium)"> <h3>You are allow to see this.</h3> </div>Estaba leyendo sobre cómo hacerlo y encontré en este documento sobre "Directivas de atributos", pero todavía no puedo implementarlo (soy nuevo con Angular 2)
Hasta ahora tengo esto:
import {Directive, ElementRef, Input} from '@angular/core'; @Directive({ selector: '[type-of-user]' }) export class TypeOfUserDirective{ constructor(private el: ElementRef){} @Input('type-of-user') userControl: string; private haspermission(permission: string) { /*the style background color is just to test if works*/ this.el.nativeElement.style.backgroundColor = permission; } }Ya agregué la directiva en app.module.
Cualquier consejo sobre cómo proceder sería genial.
Después de investigar un poco más, encontré un excelente documento sobre cómo crear directivas personalizadas, específicamente de la manera que necesito, que actúa como una directiva ngIf. Puedes leer sobre esto aquí y ver el plunkr aquí
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[isAllow]' }) export class isAllowDirective { constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {} @Input() set isAllow(allow: boolean){ if (allow) { // If condition is true add template to DOM this.viewContainer.createEmbeddedView(this.templateRef); } else { // Else remove template from DOM this.viewContainer.clear(); } } }La respuesta aceptada no usa la implementación *ngIf de angular.
Escribí una directiva *ngIf personalizada que la usa: http://avenshteinohad.blogspot.com/2018/06/custom-ngif-directive.html