1

How would I add a Material design element to an element? In my situation I want to add a fab button to a div, but the end result looks nothing like it should. Here's my code:

const div = document.createElement('mat-card');
div.classList.add('mat-card');

that works, it created a mat-card, but I want to add a fab-button inside like this:

div.innerHTML = 'Hat #34<br/>
                 <button mat-icon-button>
                   <mat-icon>favorite</mat-icon>
                 </button>`;

That doesn't get any css applied to it, so it looks like an ugly old button. Anyone know what I would do to get this working?

UPDATE:

I painstakingly replicated an existing one and..... Didn't work. I mean, sure it looks fine, and HTML says it's identical, except the ripple effects and things like that don't work on it. It still triggers the click event... not great though... Any advice on how to get it to work properly (ripple effect working etc) Here's what I did:

const button = document.createElement('button');
button.setAttribute('_ngcontent-c14', '');
button.classList.add('mat-icon-button');
button.setAttribute('mat-icon-button', '');
button.addEventListener('click', (ev) => this.openJob(ev), false);

const buttonDiv = document.createElement('div');
buttonDiv.classList.add('mat-button-ripple');
buttonDiv.classList.add('mat-ripple');
buttonDiv.classList.add('mat-button-ripple-round');
buttonDiv.setAttribute('matripple', '');
buttonDiv.setAttribute('ng-reflect-trigger', '[object HTMLButtonElement]');
buttonDiv.setAttribute('ng-reflect-centered', 'true');
buttonDiv.setAttribute('ng-reflect-disabled', 'false');

const buttonOverlayDiv = document.createElement('div');
buttonOverlayDiv.classList.add('mat-button-focus-overlay');

const buttonSpan = document.createElement('span');
buttonSpan.classList.add('mat-button-wrapper');

const matIcon = document.createElement('mat-icon');
matIcon.setAttribute('_ngcontent-c14', '');
matIcon.classList.add('mat-icon');
matIcon.classList.add('material-icons');
matIcon.setAttribute('role', 'img');
matIcon.setAttribute('aria-hidden', 'true');
matIcon.innerHTML = 'favorite';

buttonSpan.appendChild(matIcon);
button.appendChild(buttonSpan);
button.appendChild(buttonDiv);
button.appendChild(buttonOverlayDiv);
div.appendChild(button);
Jus10
  • 14,519
  • 21
  • 52
  • 77
  • 1
    You generally don't want to just add components to the DOM if you are using angular. You are much better off using `ngFor` or `ngIf` to dynamically create your components. If you absolutely have to do it this way then you need to follow a complicated process described in [this question](https://stackoverflow.com/questions/38888008/how-can-i-use-create-dynamic-template-to-compile-dynamic-component-with-angular). – Pace Jan 26 '18 at 01:09
  • Possible duplicate of [How can I use/create dynamic template to compile dynamic Component with Angular 2.0?](https://stackoverflow.com/questions/38888008/how-can-i-use-create-dynamic-template-to-compile-dynamic-component-with-angular) – Pace Jan 26 '18 at 01:09
  • Ripple is calculated and added dynamically with javascript. See `https://github.com/angular/components/blob/695dde64abde2b16015c46a7681ab4c9dd8c2f44/src/material/core/ripple/ripple-renderer.ts`. – hovado Jun 16 '20 at 08:57

0 Answers0