tools for Angular

Components

Copy

A small button to copy some content into the clipboard.

<copy [icon]="copy" [getData]="onCopy()"> </copy>

onCopy(){
 // todo: get the content of an HTMLElement
 return "data to be copied to the clipboard"
}

Dynamic dialog

dynamically inject a component into the dialog

// open a dialog and insert `MyComponent` into it.
this.dialog.open(DynamicDialogComponent, {
  data: {
    component: MyComponent,
    inputs: {},
  },
});

Directives

Attributes

add arbitrary attributes to any element.

<my-component [ngxAttributes]="{valid: true}" />

This passes the specified attributes directly to the element generated by <my-component>, even if it doesn't define these attributes.

Pipes

• html2text: convert HTML to plain text. useful for summaries or article cards, or places that don't support html like chat bots.
• hypernate: automatically activate plain hyperlinks in the content.
• keepHTML: bypasses Angular sanitization and keeps the HTML content as is.
• length: limit the length of the content.
• nl2br: convert break lines of plain text formats into HTML <br /> elements.
• slug: convert a text into a URL-friendly slug.

Example

<my-component [summary]="content | length: 200 | html2text" />

Services

dynamically load components

dynamically load a component and insert it into the specified placeholder.

@Component(...)
class MyComponent{

 constructor(private loadComponentsService: LoadComponentsService){}

 loadAd(){
    // dynamically load the Ads component.
    this.loadComponentsService.load(AdsComponent, placeholder);
 }
}

Dynamically Load an element

dynamically load elements such as JS scripts, CSS files, ...

@Component(...)
class MyComponent{

 constructor(private loadService: NgxLoadService){}

 loadAd(){
    this.loadService.load("https://example.com/script.js");
 }
}

Meta tags generator

power up the SEO of your website by generate meta tags. It also automatically generate og tags, twitter cards, and Google crawler tags.

@Component(...)
class MyComponent{

 constructor(private metaService: MetaService){}

 ngOnInit(){
    this.metaService.addTags({
        title: "Why SEO is important? | my-site.com",
        image: "https://my-site.com/site-logo.webp",
        ...
    })
 }
}

platform

Check if the current component is running in the server or browser

@Component(...)
class MyComponent{

 constructor(private platform: PlatformService){}

 ngOnInit(){
    if(this.platform.isServer()){
        console.log("We are in the server side")
    }

    console.log(this.platform.getPlatform()) // server or browser
 }

}