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

Using Angular 2 to inject JSON data through HTTP requests

When utilizing Monggose, Angular, and Node, a route containing the deleteOne method repeatedly reports that the object has been successfully deleted, despite the delete count remaining

Dynamically passing output placeholders through ng-content in an Angular component template

Unable to locate the module '@vitejs/plugin-react' or its associated type

What's causing the subscription feature to malfunction in a fresh browser tab?

Pause for Progress - Angular 6

Automatically increase the version with Yarn auto Version Bump

The Angular application is not able to initiate the POST request

ts1109: An error occurred as there was an expectation for an angular

Issue with dispatching actions in React using TypeScript and hooks

What are the steps to enable screen sharing within an Electron application?

Send a variable from a next.js middleware to an API request

Loading components dynamically in Angular2 with parameters

Installing failed due to an error in the postinstall script of @angular/core version 9

Alert an Angular 2 component about changes triggered by a service

For an unknown reason, I am facing difficulties in using the Storage feature from @angular/fire in ANGULAR 16

Killing the command prompt in Typescript: A step-by-step guide

What is the best way to establish communication between the browser and an express.js server while utilizing angular ssr?

What is the process for developing an interface adapter using TypeScript?

The upcoming router is not compatible with the NextPage type