Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Directive that works as ng-if (Angular 2)

I'm trying to create a directive that works as a ngIf to control if the user with the correct permission is allow to see specific content, something like this:

<div [type-of-user]="load data from the user and check it (normal or premium)">
    <h3>You are allow to see this.</h3>
</div>

I was reading about how to do it and found on this doc about "Attribute Directives" but I still can't implement it (I am new with Angular 2)

So far I have this:

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

}

I already added the directive in the app.module.

Any advice how to proceed would be great.

like image 996
Daniel Soublett Avatar asked Apr 20 '17 11:04

Daniel Soublett


People also ask

What is an angular 2 directive?

A directive is a custom HTML element that is used to extend the power of HTML. Angular 2 has the following directives that get called as part of the BrowserModule module. If you view the app. module.

What is the use of * ngIf in angular2?

A shorthand form of the directive, *ngIf="condition" , is generally used, provided as an attribute of the anchor element for the inserted template. Angular expands this into a more explicit version, in which the anchor element is contained in an <ng-template> element.

Which type of directives starts with * ng?

AngularJS directives are extended HTML attributes with the prefix ng- . The ng-app directive initializes an AngularJS application. The ng-init directive initializes application data. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

How to use *ngif directive in angular?

You use the *ngIf directive in Angular to show some data or item based on some condition. Let's say we are calling an API. We show some message that the data is loading while the application fetches the data from the API, because it can take some time depending on the server.

What is ng if in AngularJS?

AngularJS ng-if Directive 1 Definition and Usage. The ng-if directive removes the HTML element if the expression evaluates to false. ... 2 Syntax. Supported by all HTML elements. 3 Parameter Values. An expression that will completely remove the element if it returns false. If it returns true, a copy of the element will be inserted instead.

What is the difference between angular 1 and Angular 2 components?

In angular 2 directives provide more features and are more flexible as compared to Angular 1.x > in Agular 2 directive provides as simplicity and make code maintainable and readable for the developer. Also, the code is independent. In angular 2 components is type of directive or we can say custom directive.

What is the difference between ng-if and Ng-hide in HTML?

If the if statement evaluates to true, a copy of the Element is added in the DOM. The ng-if directive is different from the ng-hide, which hides the display of the element, where the ng-if directive completely removes the element from the DOM.


2 Answers

After some more research I found a great doc about how to build custom directives, specifically the way I need, that acts as an ngIf directive. You can read about it here and see the plunkr here

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

  }

}
like image 161
Daniel Soublett Avatar answered Oct 01 '22 02:10

Daniel Soublett


The accepted answer doesn't use angular's *ngIf implementation.

I've written a custom *ngIf directive that uses it: http://avenshteinohad.blogspot.com/2018/06/custom-ngif-directive.html

like image 23
ohadinho Avatar answered Oct 01 '22 04:10

ohadinho