how to use a custom directive to a DOM element with typescript

Question

I have created a custom directive in my angular project. I want to use it to a DOM element in typescript. how to do that if it's possible? thank you!

I didn't find anything useful in my searches

Hi, On directives you can use any `selector` you want. `@Directive({ selector: 'textarea' })` applies to all textareas in your component template (let's call it `ComponentB` which is declared in `ModuleB`). Let's say your `DirectiveA` is declared in `ModuleA`, then just make sure you've imported `ModuleA` in `ModuleB` — Pieterjan, Apr 10 '23 at 15:07

score 1 · Answer 1 · answered Apr 10 '23 at 19:41

I think you're looking about how to make a custom directive & use to any HTML element to manipulate the tag also,

Here is some code snippet I hope it will help you to understand, Its a alternative way to make *ngIf so far this is the basic structure of making custom directive you can take Idea from it & extend it more further. By the way this directive also type-safe.

import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';

class IfContext {
  public isShow: boolean = true;

  public get $implicit() {
    return this.isShow;
  }
}


@Directive({
  selector: '[appIf]',
  standalone: true
})
export class IfDirective {

  public ifContext = new IfContext()

  constructor(
    private viewContainerRef: ViewContainerRef,
    private templateRef: TemplateRef<any>
  ) {
  }

  @Input('appIf') set setIf(value: boolean) {
    this.ifContext.isShow = value;
    if (value) {
      this.viewContainerRef.clear();
    } else {
      this.viewContainerRef.createEmbeddedView(this.templateRef)
    }
  }

  static ngTemplateContextGuard(dir: IfDirective, ctx: unknown): ctx is IfContext {
    return true
  }

}

so, in the component you can use it like bellow & if you not provide any boolean value it will throw error.

    <h2 *appIf="show">Hello World</h2>

Thanks

I know how to create a custom directive (I already created it). But I have requirement like, implement checkBox functionality in the typescript file. So my question is about in case I don't have .html how to use a custom, already created, directive to a specific DOM element like checkbox text in typescript .(ts) — Nou, Apr 11 '23 at 08:17

score -1 · Answer 2 · answered Apr 10 '23 at 15:03

-1

I would recommend you declare your directive in a shared module and export the directive to use it over the complete project you create. like this:

@NgModule({
  declarations: [customDirective],
  exports:[customDirective]
})
export class SharedModule { }

answered Apr 10 '23 at 15:03

Khaled Ayed

1,121
3
12
29

[No `SharedModule` please](https://leandromerli.com/angular-dont-use-shared-modules/) – Pieterjan Apr 10 '23 at 15:05
@Pieterjan why ? and Is there any other solution? – Khaled Ayed Apr 10 '23 at 15:12
It leads to too large bundle sizes. If all pipes/components/directives are declared in a `SharedModule` you most likely need to load this `SharedModule` in your `AppModule`, which causes all your application's code to end up in the main bundle. So when a visitor visits your website, the browser has to download the entire application before the app is responsive – Pieterjan Apr 10 '23 at 15:20
1

For libraries [it gets a little more tricky](https://stackoverflow.com/questions/74012408/using-single-component-from-library-causes-lazy-loaded-modules-to-end-up-in-main). Importing a single module in your `AppModule` bundles the entire library entrypoint. So to get a decent main bundle size I even had to create a seperate entrypoint per functionality... – Pieterjan Apr 10 '23 at 15:24

how to use a custom directive to a DOM element with typescript

2 Answers2