🚀 Angular ng-templates: Crafting Reusable templates with Ease
Tags: webdev, javascript, angular, programming
Published: 2023-02-14 17:01:50

##1. NgIf with else
This is a common scenario such as showing Loader where we will use `ngIf="isLoading"` and `ngIf="!isLoading"`. Instead we can use the following syntax.

```typescript
export class HomePageComponent {
  constructor() {}
  isLoading : boolean = false
}
```

```html
<div *ngIf="isLoading else content">
  <h1> Loading ... </h1>
</div>

<ng-template #content>
  <h1> Hello there </h1>
</ng-template>
```

##2. Reuse Static HTML 
By creating a reference to the template we can then use that to reuse with the help of `ng-container` and `ngTemplateOutlet`.
```html

<ng-template #staticContent>
  <h1> 
      This content can be used in this 
      component any number of times
  </h1>
</ng-template>


<ng-container *ngTemplateOutlet="staticContent"></ng-container>
<ng-container *ngTemplateOutlet="staticContent"></ng-container>
<ng-container *ngTemplateOutlet="staticContent"></ng-container>
```

![Static HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oad87ym8vxnrfi2qnpgx.png)

##3. Resue Dynamic HTML With `ng-template`
`ng-template` also will take variables inside that and render dynamically.

```typescript
export class HomePageComponent {
  constructor() {}

  user_1 = {
    id: 1,
    firstName: 'Walter',
    lastName: 'White'
  }

  user_2 = {
    id: 2,
    firstName: 'Jesse' 
  }
}

```

```html
<ng-template #userTemplate let-user>
  <span *ngIf="user">First Name : {{user.firstName}}</span>
  <span *ngIf="user&& user.lastName"> Last Name : {{user.lastName}}</span>
</ng-template>

<ng-template 
*ngTemplateOutlet="userTemplate; context: {$implicit: user_1 }">
</ng-template>
<br>
<ng-template 
*ngTemplateOutlet="userTemplate; context: {$implicit: user_2 }">
</ng-template>

```
![Sample 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cza6xwz7ykvu14cet7uo.png)


The context object's keys will be available for binding by the local template let declarations (in this case `let-user`). Using the key **`$implicit`** in the context object will set its value as default.

We can also use the following syntax to assign it to variables without `$implicit` and you can use multiple let declarations in an `ng-template` by separating them with a `comma`. For example, if you have a component with properties user and address, you can use both in an `ng-template` like this

```typescript
export class HomePageComponent {
  constructor() {}
  user = {
    id: 1,
    name: 'Walter',
    lastName: 'White'
  }

  address = {
    street: 'Bakers Street'
  }
}
```

```html
<ng-template #myTemplate let-user="user" let-address="address">
  <p>{{ user.name }}</p>
  <p>{{ address.street }}</p>
</ng-template>

<ng-template 
 *ngTemplateOutlet="myTemplate; 
 context: {user : user , address : address }">
</ng-template>

```

_Peace 🕊_


---
Hey I just made an chrome extension that makes your css debugging easier. Try and give me suggestions to improve. [Find Ghost Css](https://chrome.google.com/webstore/detail/ghost-css-detector/pphfihfikeimkmnjielhjjgapkmnimnm)

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more.

You can make a drink [Buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan). Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @[Medium](https://medium.com/@shriharimohan) for free!

## Try Our new product for free!
[DocsAI](https://docsai.app/) - Create AI support agents with your documents in the most affordable price, starts at **0$**. Don't need a bot , but need ai help on your docs just upload and start chating !

Using for a company ? [Check out our pricing](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

##More Free Articles from me
{% embed https://dev.to/shrihari/how-i-built-a-chrome-extension-that-finds-ghost-css-ghost-css-detector-4aj0 %}

{% embed https://dev.to/shrihari/navbar-with-background-blur-aesthetic-look-in-2-lines-of-code--4kp6 %}

{% embed https://dev.to/shrihari/why-array-index-starts-with-0-a-pointers-magic--j53 %}