How to fix : Cannot set property 'innerHTML' of null error in Angular 6?

Question

I want to create a custom calendar in my app. While developing code in JavaScript it worked. After when I tried to migrate my code to Angular 6 it is not working properly. Angular throwing a run-time error. Which I'm not able to resolve,

Anyone please help me with this!

This is the Stack-Blitz link which I'm working on :StackBlitz!

showCalendar(month, year) {
const firstDay = (new Date(year, month)).getDay();
const daysInMonth = 32 - new Date(year, month, 32).getDate();

console.log('\n val \n' + new Date(year, month, 32).getDate());

const tbl = document.getElementById('calendar-body');

// clearing all previous cells
tbl.innerHTML = '';

// filing data about month and in the page via DOM.
this.monthAndYear.innerHTML = this.months[month] + ' ' + year;

 // creating all cells
let date = 1;
for (let i = 0; i < 6; i++) {
    const row = document.createElement('tr');

    for (let j = 0; j < 7; j++) {
        // let cell = document.createElement('td');
        if (i === 0 && j < firstDay) {
            const cell = document.createElement('td');
            const cellText = document.createTextNode('');
            cell.appendChild(cellText);
            row.appendChild(cell);
        } else if (date > daysInMonth) {
            break;
        } else {
            const cell = document.createElement('td');
            const cellText = document.createTextNode(date.toString());
        if (date === this.today.getDate() && year === this.today.getFullYear() && month === this.today.getMonth()) {
            // cell.classList.add("bg-info");
        } // color todays date
            date++;
        }
    }
    tbl.appendChild(row); // appending each row into calendar body.
  }
}

constructor() {
 this.today = new Date();
 this.currentMonth = this.today.getMonth();
 this.currentYear = this.today.getFullYear();
 this.monthAndYear = document.getElementById('monthAndYear');
}

ngOnInit() {
 this.showCalendar(this.currentMonth, this.currentYear);
 console.log('ngOnInit');
}

Expected result is It show a calendar.

But it is giving the error as: ERROR TypeError: Cannot set property 'innerHTML' of null at CustomCalendarComponent.push../src/app/components/custom-calendar/custom-calendar.component.ts.CustomCalendarComponent.showCalendar (custom-calendar.component.ts:67)

Please, please, please, please, please stop direct accessing the DOM in Angular. That's not an Angular way to achieve a result, that's just a way to execute normal code in a heavier way — Christian Vincenzo Traina
– Christian Vincenzo Traina, Commented Dec 24, 2018 at 19:51
this.monthAndYear is null - thats what stackblitz says so you got different problem here. — Antoniossss
– Antoniossss, Commented Dec 24, 2018 at 19:59
@Antoniossss When I open the log innerHtml error which I'm seeing. — Rajath
– Rajath, Commented Dec 25, 2018 at 2:38

Rafael · Accepted Answer · 2018-12-24 22:41:37Z

1

Move document.getElementByid('monthAndYear') to ngOnInit since there is no attached DOM yet when contructor is called.

https://stackblitz.com/edit/angular-yzzvsb?file=src/app/app.component.ts

Besides that, the entire calendar generation logic is broken so you will have to work on it. Rows and cells are added. However, why you set them as empty is a mystery.

edited Dec 24, 2018 at 22:41

Rafael

7,79613 gold badges36 silver badges49 bronze badges

answered Dec 24, 2018 at 20:34

Antoniossss

32.7k7 gold badges67 silver badges119 bronze badges

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

1 Comment

Rajath Over a year ago

apologize, while copying code from local machine to stackblitz I missed some lines of code. Now I updated my code in Stack-Blitz.

Chellappan வ · Accepted Answer · 2018-12-25 03:52:04Z

Angular use separate API for manipulate DOM.The Renderer2 provided by Angular in the form of a service that allows to manipulate elements of your app without having to touch the DOM direct

If you want to Select specific element from DOM use template variable, then use ViewChild decorator to access the element inside component class

component.html

<h3 class="card-reader" id="monthAndYear" #monthAndYear> Month and Year</h3>

component.ts

@ViewChild('monthAndYear') monthAndYear: ElementRef;

Create New element Use Renderer2

      constructor(private ren: Renderer2) {}
      const cell = this.ren.createElement('td');
      const cellText = this.ren.createText('');
      cell.appendChild(cellText);

Ref:https://alligator.io/angular/using-renderer2/

Forked Example:https://stackblitz.com/edit/angular-up1ibg

Collectives™ on Stack Overflow

How to fix : Cannot set property 'innerHTML' of null error in Angular 6?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related