CODEWITHSUNDEEP
angulardatepickercalendarangular-material
Bernardao
Bernardao

Reputation: 500

Angular6 Material Datepicker add content to the template

I would like to know how to achieve it. I have found

Here I found how it should be done, by modifying the component, not extending it but I really can't find how to do it in the code. More information would be great. How can I extend or modify the template of mat-calendar? Inside the mat-calendar code I can't find the template.

And in this second case I found how to add a button here2 but I have the same problem, do'nt know how to do it, could someone provide any exaple where I can see how to achieve it.

Upvotes: 1

Views: 1771

Answers (1)

Marshal
Marshal

Reputation: 11081

This is an ugly way of doing it, but it shows how to complete the task via manipulating the document object.

  • I attempted via @ViewChild and trying the getConnectedOverlayOrigin method but I could not figure it out.
  • This was the only way I was able to manipulate the calender content in the DOM.
  • Hopefully someone will post a native Angular/Material way of doing this, I would like to know how personally.

Using the Opened event:

<mat-datepicker (opened)="opened()" #picker></mat-datepicker>

Component Method:

 opened() {
    var btn = document.createElement("button");
    btn.onclick = function () {
      alert("blabla");
    };
    var t = document.createTextNode("Click Me");
    btn.appendChild(t);
    var div = document.createElement("div");
    div.appendChild(btn);

    setTimeout(() => {
      var element = document.getElementsByTagName('mat-datepicker-content');
      element[0].appendChild(btn);
    })
  }

Upvotes: 5

Related Questions