What is the best way to leverage *ngIf within the host of my Directive?

Question

What is the best way to leverage *ngIf within the host of my Directive?

I am working on creating a custom Directive that can dynamically add or remove itself from the DOM similar to *ngIf functionality. Here is what I have so far:

@Directive({
    selector: '[myDirective]',
    host: {
        '[hidden]': 'hidden',
    }
})
export class MyDirective {
  constructor(private myService : MyService) {
  }

  hidden() {
    return !this.myService.valid;
  }

However, what I am aiming for is something like this:

@Directive({
    selector: '[myDirective]',
    host: {
        '*ngIf': 'hidden',
    }
})
...

Unfortunately, using '*ngIf': 'hidden' in the host of the Directive is throwing an error:

Can't bind to 'ngIf' since it isn't a known property of 'button'.

Similarly, trying '[ngIf]': 'hidden' is not achieving the desired result.

So, I am seeking advice on how to implement ngIf functionality within a Directive.

angular typescript

Answer 1

Answer №1

@Injectable()
export class MyService {
  active = true;
}

@Directive({
  selector: '[myVisibility]'
})
export class MyVisibilityDirective {
  constructor(private myService: MyService, 
        private element:ElementRef,
        private viewContainer:ViewContainerRef,
        private myTemplate:TemplateRef<any>) {
  }

  ngAfterViewInit(){
    if(this.myService.active) {
      this.viewContainer.createEmbeddedView(this.myTemplate);
    }
  }
}

@Component({
  selector: 'my-component',
  template: `
    <div>
      Show or Hide: <h2 *myVisibility>Greetings</h2>
    </div>
  `,
})
export class AppComponent {
  constructor() {
  }
}

Answer 2

@Injectable()
export class MyService {
  active = true;
}

@Directive({
  selector: '[myVisibility]'
})
export class MyVisibilityDirective {
  constructor(private myService: MyService, 
        private element:ElementRef,
        private viewContainer:ViewContainerRef,
        private myTemplate:TemplateRef<any>) {
  }

  ngAfterViewInit(){
    if(this.myService.active) {
      this.viewContainer.createEmbeddedView(this.myTemplate);
    }
  }
}

@Component({
  selector: 'my-component',
  template: `
    <div>
      Show or Hide: <h2 *myVisibility>Greetings</h2>
    </div>
  `,
})
export class AppComponent {
  constructor() {
  }
}

What is the best way to leverage *ngIf within the host of my Directive?

Answer №1

Similar questions

Changing the environment variable in an Angular application with user input

What is the best approach to organize data from an observable based on a nested key?

What is the best way for me to access a certain web address?

Scoped variable in Typescript producing a generated Javascript file

The option value in mat-autocomplete is not displaying correctly on IOS devices

What is the best way to access the rendered child components within a parent component?

What are the steps to utilize a personalized validation access form within a component?

Can a child component's constructor be enhanced with a fresh Injection class without the necessity of invoking super()?

Leveraging ngOnChanges to determine the display of an overlay based on input alterations

Automatically focus on the button

Why am I struggling to show the success message on my basic CRM Angular web application?

Tips for showing solely the current page number within angular pagination

Deleting an element in an Array of objects using Typescript

The namespace does not have any exported object named 'LocationState'

Is there a way to sort through an array based on a nested value?

Guide to making a second request using an if statement inside an observable

Exploring the routing hierarchy in Angular: Setting up parent and child

Does the Angular library "ngx-paypal" have the capability to process recurring payments?

Tips for updating a single event in eventSource after it has been dragged and dropped in fullcalendar-angular

Angular 2 - One-Stop Form Component for Creating and Modifying