Angular 4: Leveraging a directive as a universal constant

Question

Angular 4: Leveraging a directive as a universal constant

I am looking to develop a directive that allows me to utilize a template variable in order to access a global variable, much like $rootScope in Angular.JS. The goal is to avoid having to inject a service into every component where I need access to the variable.

Here's an example:

@Directive({
    selector: '[app]',
    exportAs: 'app'
})
export class AppDirective {
    isLoggedIn: boolean = false;

    constructor() {
        // Code to initialize 'this.ready' will go here...
    }
}

The intention is to use the code above in my template as follows:

<div #app>
    <div *ngIf="app.isLoggedIn">...</div>
</div>

Is it possible to achieve something like this?

angular typescript

Answer 1

Answer №1

Instead of using ngIf, consider implementing a directive for more efficient code. By injecting your service into the directive, you can maintain DRY (Don't Repeat Yourself) principles and keep markup minimal in your components.

You can create a directive like this:

@Directive({
  selector: '[showIfLoggedIn]'
})
export class ShowIfLoggedInDirective implements OnInit {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainerRef: ViewContainerRef
  ) { }

  ngOnInit() {
    var isLoggedIn = false; // Use service here and inject into the constructor.
    if(isLoggedIn) {
        this.viewContainerRef.createEmbeddedView(this.templateRef);
      } else {
        this.viewContainerRef.clear();
      }
  }
}

To use it:

<h2 *showIfLoggedIn> I am logged in </h2>

To apply a class dynamically:

@Directive({
  selector : '[applyClassIfLoggedIn]'
})

export class ApplyClassIfLoggedIn implements OnInit {
  @Input('applyClassIfLoggedIn') className;
  constructor(
    private ele: ElementRef,
    private renderer: Renderer2
  ) { }


  ngOnInit() {
    var isLoggedIn = true; // Use service here.
    if(isLoggedIn) {
        this.renderer.addClass(this.ele.nativeElement, this.className);
    }

  }
}

Then:

<h2 applyClassIfLoggedIn='logged-in'>Red if logged in </h2>

Check out the Plunkr example here

Answer 2

Instead of using ngIf, consider implementing a directive for more efficient code. By injecting your service into the directive, you can maintain DRY (Don't Repeat Yourself) principles and keep markup minimal in your components.

You can create a directive like this:

@Directive({
  selector: '[showIfLoggedIn]'
})
export class ShowIfLoggedInDirective implements OnInit {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainerRef: ViewContainerRef
  ) { }

  ngOnInit() {
    var isLoggedIn = false; // Use service here and inject into the constructor.
    if(isLoggedIn) {
        this.viewContainerRef.createEmbeddedView(this.templateRef);
      } else {
        this.viewContainerRef.clear();
      }
  }
}

To use it:

<h2 *showIfLoggedIn> I am logged in </h2>

To apply a class dynamically:

@Directive({
  selector : '[applyClassIfLoggedIn]'
})

export class ApplyClassIfLoggedIn implements OnInit {
  @Input('applyClassIfLoggedIn') className;
  constructor(
    private ele: ElementRef,
    private renderer: Renderer2
  ) { }


  ngOnInit() {
    var isLoggedIn = true; // Use service here.
    if(isLoggedIn) {
        this.renderer.addClass(this.ele.nativeElement, this.className);
    }

  }
}

Then:

<h2 applyClassIfLoggedIn='logged-in'>Red if logged in </h2>

Check out the Plunkr example here

Answer 3

Answer №2

There are two main approaches to achieve this task, both requiring the injection of a common service into the components that need it. By implementing these methods, you can minimize the need to modify the component code beyond the constructor and template sections.

Method 1: Direct Service Call from Template

application.component.ts

import {SecurityService} from './security.service';
@Component({
    selector: '[App]',
    template: `<div *ngIf="securityService.isLoggedIn">Logged in!</div>`
})
export class ApplicationComponent {
  constructor(public securityService: SecurityService){ }
}

Method 2: Using a Shared Abstract Class

security-context.component.ts

import {SecurityService} from './security.service';
export abstract class SecurityContextComponent {
  constructor(protected securityService: SecurityService){}

  get isLoggedIn(): boolean{
    return this.securityService.isLoggedIn;
  }
}

application.component.ts

import {SecurityContextComponent} from './security-context.component';
import {SecurityService} from './security.service';

@Component({
    selector: '[App]',
    template: `<div *ngIf="isLoggedIn">Logged in!</div>`
})
export class ApplicationComponent implements SecurityContextComponent {
  constructor(securityService: SecurityService){
    super(securityService);
  }
}

Answer 4

There are two main approaches to achieve this task, both requiring the injection of a common service into the components that need it. By implementing these methods, you can minimize the need to modify the component code beyond the constructor and template sections.

Method 1: Direct Service Call from Template

application.component.ts

import {SecurityService} from './security.service';
@Component({
    selector: '[App]',
    template: `<div *ngIf="securityService.isLoggedIn">Logged in!</div>`
})
export class ApplicationComponent {
  constructor(public securityService: SecurityService){ }
}

Method 2: Using a Shared Abstract Class

security-context.component.ts

import {SecurityService} from './security.service';
export abstract class SecurityContextComponent {
  constructor(protected securityService: SecurityService){}

  get isLoggedIn(): boolean{
    return this.securityService.isLoggedIn;
  }
}

application.component.ts

import {SecurityContextComponent} from './security-context.component';
import {SecurityService} from './security.service';

@Component({
    selector: '[App]',
    template: `<div *ngIf="isLoggedIn">Logged in!</div>`
})
export class ApplicationComponent implements SecurityContextComponent {
  constructor(securityService: SecurityService){
    super(securityService);
  }
}

Answer 5

Answer №3

To determine if a random value returns a boolean based on the global variable, you can use the pipe method.

<div #app>
    <div *ngIf="'randomstring' | auth">...</div>
</div>

In this scenario, auth is associated with an AuthPipe that outputs either true or false depending on the global variable.

Simply injecting a dependency into the pipe should suffice for this purpose.

While it may not be the most elegant solution, using pipes within templates is effective in achieving the desired outcome.

Answer 6

To determine if a random value returns a boolean based on the global variable, you can use the pipe method.

<div #app>
    <div *ngIf="'randomstring' | auth">...</div>
</div>

In this scenario, auth is associated with an AuthPipe that outputs either true or false depending on the global variable.

Simply injecting a dependency into the pipe should suffice for this purpose.

While it may not be the most elegant solution, using pipes within templates is effective in achieving the desired outcome.

Answer 7

Answer №4

Here is an interesting approach to consider:

If you are open to utilizing your template within your .ts file, you can implement something similar to the following (taken from the provided post):

Start by creating a global class:

export class Globals {
    isLoggedIn = true;
}

Then incorporate this into your component:

import { Globals } from './globals';

@Component({
    selector: 'my-app',
    template: `<h1>My Component {{globals.isLoggedIn}}<h1/>`
})
export class AppComponent {
    constructor(){
    }
}

The key lies in using backticks (`) which enables the execution of {{globals.var}}

Answer 8

Here is an interesting approach to consider:

If you are open to utilizing your template within your .ts file, you can implement something similar to the following (taken from the provided post):

Start by creating a global class:

export class Globals {
    isLoggedIn = true;
}

Then incorporate this into your component:

import { Globals } from './globals';

@Component({
    selector: 'my-app',
    template: `<h1>My Component {{globals.isLoggedIn}}<h1/>`
})
export class AppComponent {
    constructor(){
    }
}

The key lies in using backticks (`) which enables the execution of {{globals.var}}

Angular 4: Leveraging a directive as a universal constant

Answer №1

Answer №2

Method 1: Direct Service Call from Template

Method 2: Using a Shared Abstract Class

Answer №3

Answer №4

Similar questions

Encountering complications when importing TypeScript declarations

Ways to incorporate only essential UI elements in @angular/material

Experimenting with Nuxtjs application using AVA and TypeScript

What is the best way to test chained function calls using sinon?

PhpStorm flawlessly detects ES7 type hinting errors

Interference with ElementClickInterceptedException in Selenium is caused by the presence of a WebPack iframe within an Angular application, despite implementing WebDriverWait

Is there a way to make an angular component reuse itself within its own code?

What is the process for unit testing the 'navigate' function in Angular that includes query parameters?

Please exclude any files with the name npm-debug.log.XXXXXX in the .gitignore file

Is there a way to programmatically add a timestamp to a form in Angular6?

The Angular filter feature operates on individual columns instead of filtering all columns simultaneously

Triggering an event within a component to execute a specific function in another component

Angular 8 - Utilizing External URL Routing

Issue with triggering angular function multiple times in certain conditions

What steps can I take to address the issue of missing modules in an Angular application?

When attempting to assign a variable in my ngModel, what issue could be causing a problem?

Leveraging the @Input decorator to send external data into the Angular component

Can you provide information on the type signature of the `onChange` event for the MUI DatePicker?

Guide on utilizing external namespaces to define types in TypeScript and TSX

Ways to showcase my select/option in Angular 14?