html – How to dynamically add mat-icon to divs with angular renderer2?-ThrowExceptions

Exception or error:

I have a HTML with a lot of divs. I have already generated divs that look like this.

static HTML (not dynamically generated) example of desired result using renderer2

    <div class="time-rowss clearfixx" #timerowss>
      <div><mat-icon>today</mat-icon> date </div>
    </div>
    <div class="time-rows clearfix" #timerows>
      <div><mat-icon>brightness_3</mat-icon>00:00</div>
      <div><mat-icon>brightness_3</mat-icon>01:00</div>
      <div><mat-icon>brightness_3</mat-icon>02:00</div>
    </div>

I want to achieve the same but dynamically generating the divs.

What I have done so far is add dynamically times and dates.

Here is my code:

for (let j = this.requestVehicle.startDateTime.getDate(); j < this.requestVehicle.endDateTime.getDate(); j++) {
  const newTime = new Date(time.getTime() + 24 * 3600 * 1000);
  time = newTime;
  const date = this.renderer.createElement('div');
  this.renderer.appendChild(date, this.renderer.createText(newTime.getDate() + '/' + newTime.getMonth() + '/' + newTime.getFullYear()));
  this.renderer.appendChild(this.d7.nativeElement, date);
  for (let i = 0; i < 24; i++) {
    const b = this.renderer.createElement('div');
    const icon = this.renderer.createElement('mat-icon');
    if (i < 7 || i > 18) {
      this.renderer.setAttribute(icon, 'svgIcon', '"brightness_3"');
    } else {
      this.renderer.setProperty(icon, 'svgIcon', '"wb_sunny"');
    }
    let text;
    if (i >= 10) {
      text = ' ' + i;
    } else {
      text = '0' + i;
    }
    this.renderer.appendChild(b, icon);
    this.renderer.appendChild(b, this.renderer.createText(text + ':00'));
    this.renderer.appendChild(this.d3.nativeElement, b);
  }
}

I have tried several options:

  • this.renderer.setProperty(icon, ‘svgIcon’, ‘”wb_sunny”‘);

  • this.renderer.setProperty(icon, ‘svgIcon’, ‘wb_sunny’);

  • this.renderer.setAttribute(icon, ‘svgIcon’, ‘”brightness_3″‘);

  • this.renderer.setAttribute(icon, ‘svgIcon’, ‘brightness_3’);

  • this.renderer.appendChild(icon, this.renderer.createText(‘brightness’));

  • this.renderer.appendChild(icon, ‘brightness_3’);

none of these options work. I also tried iconName instead of svgIcon.

how should I add iconName or svgIcon with renderer2?

How to solve:

I figured it out. I what I was noticed when I tried to add mat-icon value with renderer createText. It was adding it correctly. The problem was that the IconName was appearing in html as name not as an icon. So I realized the css was missing. I looked into the dev tools and inspected the divs and mat-icons. I found out that they were missing classes.

So I added the classes manually.

In short

you need to create mat-icon element.

const dateIcon = this.renderer.createElement('mat-icon');

add value using createText.

this.renderer.appendChild(dateIcon, this.renderer.createText('today'));

give classes for css styling.

  this.renderer.addClass(dateIcon, 'mat-icon');
  this.renderer.addClass(dateIcon, 'material-icons');

Full code if curious. –>

for (let j = this.requestVehicle.startDateTime.getDate(); j < this.requestVehicle.endDateTime.getDate(); j++) {
  const newTime = new Date(time.getTime() + 24 * 3600 * 1000);
  time = newTime;

  const date = this.renderer.createElement('div');
  const dateIcon = this.renderer.createElement('mat-icon');
  this.renderer.appendChild(dateIcon, this.renderer.createText('today'));
  this.renderer.addClass(dateIcon, 'mat-icon');
  this.renderer.addClass(dateIcon, 'material-icons');
  this.renderer.appendChild(date, dateIcon);
  this.renderer.appendChild(date, this.renderer.createText(newTime.getDate() + '/' + newTime.getMonth() + '/' + newTime.getFullYear()));
  this.renderer.appendChild(this.d7.nativeElement, date);

  for (let i = 0; i < 24; i++) {
    const b = this.renderer.createElement('div');
    const icon = this.renderer.createElement('mat-icon');
    if (i < 7 || i > 18) {
      this.renderer.appendChild(icon, this.renderer.createText('brightness_3'));
    } else {
      this.renderer.appendChild(icon, this.renderer.createText('wb_sunny'));
    }
    let text;
    if (i >= 10) {
      text = ' ' + i;
    } else {
      text = '0' + i;
    }
    this.renderer.appendChild(b, icon);
    this.renderer.addClass(icon, 'mat-icon');
    this.renderer.addClass(icon, 'material-icons');
    this.renderer.appendChild(b, this.renderer.createText(text + ':00'));
    this.renderer.appendChild(this.d3.nativeElement, b);
  }
}

Leave a Reply

Your email address will not be published. Required fields are marked *