How to switch component in angular 5 like template?

Алексей Ягодаров

Is it possible to switch component in angular like switching templates based on user roles?:

@Component({
   selector: 'app-order-select',
    template: `
        <div *ngIf="storage.getUserRole() == 'admin'">{require('./order-select.component.html')} </div>
        <div *ngIf="storage.getUserRole() == 'legal'"> {require('./order-select.component-legal.html')} </div>`,
    styleUrls: ['./order-select.component.css']
})
export class OrderSelectComponent implements OnInit {
}

My app route:

{
    path: 'orders/select',
    component: OrderSelectComponent,
    canActivate: [AuthGuard]
},
Alex

You can use:

<div id="roleDependantContent">
    <app-component-admin *ng-if="storage.getUserRole() == 'admin'"/>
    <app-component-user *ng-if="storage.getUserRole() == 'user'"/>
</div>

It will only load the component fitting your user's role.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to switch between several sections in angular component template based on condition

From Dev

How to insert a template-ref in other component dynamically angular 5

From Dev

How to Switch component in React like an app

From Dev

How to overwrite a component in Angular 5?

From Dev

Angular 5: how to refer to a subcomponent method from a parent component HTML template?

From Dev

How To pass let-c="close" of modal template to other component's html angular 5

From Dev

How to render a hyperlink in a component template in Angular 6?

From Dev

How to invoke routed component in template in angular

From Dev

How to make a component with a runtime template in Angular?

From Dev

How to add in Angular a template in the Root Component?

From Dev

How to get html template of an Angular 2 Component?

From Dev

How to unit test an Angular 1.5 Component template?

From Dev

How to use Spread Operator in angular component template

From Dev

How to correctly refresh template of component in Angular?

From Dev

How to refresh template of component by changing variable in other component Angular 13

From Dev

Angular 5: creating a parent component with an external template and overriding the inner part

From Dev

Angular 5 getting array issue with data from service to component to template

From Dev

Angular 2 Template Component

From Dev

Angular Component Template Size

From Dev

Angular component is missing a template

From Dev

Angular component template inheritance

From Dev

Angular component not changing template

From Dev

Angular. How to switch component depending on service's actions

From

how to format date in Component of angular 5

From Dev

how to switch component in React?

From Dev

cannot switch between component in angular

From Dev

How to add custom js file to angular component like css file

From Dev

How To Put HTMLElement Inside Component Like Angular Material does

From Dev

Will using Angular Reactive Forms .get() method in template cause unnecessary method calls like a component method?

Related Related

  1. 1

    How to switch between several sections in angular component template based on condition

  2. 2

    How to insert a template-ref in other component dynamically angular 5

  3. 3

    How to Switch component in React like an app

  4. 4

    How to overwrite a component in Angular 5?

  5. 5

    Angular 5: how to refer to a subcomponent method from a parent component HTML template?

  6. 6

    How To pass let-c="close" of modal template to other component's html angular 5

  7. 7

    How to render a hyperlink in a component template in Angular 6?

  8. 8

    How to invoke routed component in template in angular

  9. 9

    How to make a component with a runtime template in Angular?

  10. 10

    How to add in Angular a template in the Root Component?

  11. 11

    How to get html template of an Angular 2 Component?

  12. 12

    How to unit test an Angular 1.5 Component template?

  13. 13

    How to use Spread Operator in angular component template

  14. 14

    How to correctly refresh template of component in Angular?

  15. 15

    How to refresh template of component by changing variable in other component Angular 13

  16. 16

    Angular 5: creating a parent component with an external template and overriding the inner part

  17. 17

    Angular 5 getting array issue with data from service to component to template

  18. 18

    Angular 2 Template Component

  19. 19

    Angular Component Template Size

  20. 20

    Angular component is missing a template

  21. 21

    Angular component template inheritance

  22. 22

    Angular component not changing template

  23. 23

    Angular. How to switch component depending on service's actions

  24. 24

    how to format date in Component of angular 5

  25. 25

    how to switch component in React?

  26. 26

    cannot switch between component in angular

  27. 27

    How to add custom js file to angular component like css file

  28. 28

    How To Put HTMLElement Inside Component Like Angular Material does

  29. 29

    Will using Angular Reactive Forms .get() method in template cause unnecessary method calls like a component method?

HotTag

Archive