Angular 4 - How to add a material design HTML element into a file with Angular 4

Question

I'm attempting to insert a md-button-toggle into a button toggle group programatically with Angular but Create Element doesn't seem to work well with non standard HTML tags.

HTML snippet i'm attempting to append:

        <md-button-toggle-group class="toggle-box" [vertical]="true" id="button-toggle-group">
            <dash-theme (onSelected)="setTheme($event);sidenav.close()"></dash-theme>
            <md-button-toggle routerLink="/admin/dashboard" (click)=sidenav.close()>
                Admin Dashboard
            </md-button-toggle>
        </md-button-toggle-group>

Angular attempt:

// adds a View Dashboard button to the side nav bar when 
addViewDashboard(): void {
    var node = document.createElement('<md-button-toggle routerLink="/' + this.dashboardName
        + '" (click)=sidenav.close() id="view-dashboard-button"> View Dashboard </md-button-toggle>');
    document.getElementById("button-toggle-group").appendChild(node);
    }

(this.dashboardName is just a string which will be passed into the router)

I realize CreateElement isn't supposed to work like this and can't really think of how else I can manage to do this.

The end product should be something like:

        <md-button-toggle-group class="toggle-box" [vertical]="true" id="button-toggle-group">
            <dash-theme (onSelected)="setTheme($event);sidenav.close()"></dash-theme>
            <md-button-toggle routerLink="/admin/dashboard" (click)=sidenav.close()>
                Admin Dashboard
            </md-button-toggle>
            <md-button-toggle routerLink="/[this.dashboardName Value]" (click)=sidenav.close() id="view-dashboard-button">
                View Dashboard
            </md-button-toggle>
        </md-button-toggle-group>

Jeff Marino · Accepted Answer · 2017-07-06 20:41:12Z

1

I would just use an array to represent the button toggle info...

<md-button-toggle-group class="toggle-box" [vertical]="true" id="button-toggle-group">
    <dash-theme (onSelected)="setTheme($event);sidenav.close()"></dash-theme>
    <md-button-toggle *ngFor="let b of buttons" routerLink="b.route" (click)="b.clickAction()">{{b.title}}</md-button-toggle>
</md-button-toggle-group>

Here's an example of the component property you can use to drive the template.

buttons: any = [
    { title: 'button 1', route: '/admin/dashboard', clickAction: () => { alert('action 1'); } },
    { title: 'button 2', route: '/[this.dashboardName Value]', clickAction: () => { alert('action 2'); } }
]

answered Jul 6, 2017 at 20:41

Jeff Marino

1,1761 gold badge7 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 4 - How to add a material design HTML element into a file with Angular 4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related