Enums are great but they are not visible in Angular templates by default.
With this little trick you can make them accessible.

enum Animals {
      DOG,
      CAT,
      DOLPHIN
    }
    
    @Component({
      ...
    })
    export class AppComponent {
      animalsEnum: typeof Animals = Animals;
    }
    

You can create own helper component and use it instead of *ngIf.

@Component({
      selector: 'loader',
      template: `
        <ng-content *ngIf="!loading else showLoader"></ng-content>
        <ng-template #showLoader>🕚 Wait 10 seconds!</ng-template>
      `
    })
    class LoaderComponent {
      @Input() loading: boolean;
    }
    

For usage example:

<loader [loading]="isLoading">🦊 🦄 🐉</loader>
    

Note that the content will be eagerly evaluated, e.g. in the snippet below destroy-the-world will be created before the loading even starts:

<loader [loading]="isLoading"><destroy-the-world></destroy-the-world></loader>
    

Links

• https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b
• https://blog.angularindepth.com/https-medium-com-thomasburleson-animated-ghosts-bfc045a51fba

In certain cases @Input and @Output properties can be named differently than the actual inputs and outputs.

<div 
      pagination 
      paginationShowFirst="true"
      (paginationPageChanged)="onPageChanged($event)">
    </div>
    

@Directive({ selector: '[pagination]'})
    class PaginationComponent {
      @Input('paginationShowFirst') 
      showFirst: boolean = true;
    
      @Output('paginationPageChanged') 
      pageChanged = new EventEmitter();
    }
    

Note: Use this wisely, see StyleGuide recommedation

Links

• https://angular.io/guide/styleguide#style-05-13

While the best way of reusing your code is creating a component, it's also possible to do it in a template.

To do this you can use ng-template along with *ngTemplateOutlet directive.

<p>
      <ng-container *ngTemplateOutlet="fancyGreeting"></ng-container>
    </p>
    
    <button>
      <ng-container *ngTemplateOutlet="fancyGreeting"></ng-container>    
    </button>
    
    <ng-template #fancyGreeting>
      Hello <b>{{name}}!</b>
    </ng-template>
    

Links

• https://angular.io/api/common/NgTemplateOutlet
• https://angular.io/guide/structural-directives#the-ng-template

*ngIf directive also supports else statement.

<div *ngIf="isLoading; else notLoading">loading...</div>
    
    <ng-template #notLoading>not loading</ng-template>