Issue of directive loading in view before data is present

Question

The view is loading before the data which is coming in from a call and being passed on to the directive in Angular 4.

I did some debugging but was unable to wrap my head around this thing, I guess issue is with the data not being present before the view getting loaded.

Error:

ERROR TypeError: Cannot read property 'type' of undefined
at EngagementFullviewComponent.dataFortooltip (engagement- 
fullview.component.ts:575)
at Object.eval [as updateDirectives] (EngagementFullviewComponent.html:198)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13067)
at checkAndUpdateView (core.es5.js:12251)
at callViewAction (core.es5.js:12599)
at execEmbeddedViewsAction (core.es5.js:12557)
at checkAndUpdateView (core.es5.js:12252)
at callViewAction (core.es5.js:12599)
at execEmbeddedViewsAction (core.es5.js:12557)
at checkAndUpdateView (core.es5.js:12252)

Html with Directive [tooltip is the directive]. The "row" which I am getting is from from a http call which is then processed and passed on to tooltip Directive to be rendered in html

<img src="assets/images/restriction.png" tooltip="{{dataFortooltip(row)}}">

ts file

    dataFortooltip(data){
    let concatData;
    debugger;
    if(data.restrictions){
    for(let i=0;i<=data.restrictions.length;i++){
    concatData += data.restrictions[i].type
        }
    return concatData;
    }

tooltip.directive.ts

   import { Directive, Input, ElementRef, HostListener, Renderer2 } from 
   '@angular/core';

   @Directive({
   selector: '[tooltip]'
   })
   export class TooltipDirective {
   @Input('tooltip') tooltipTitle: string;
   @Input() placement: string;
   @Input() delay;
   tooltip: HTMLElement;
   offset = 10;

   constructor(private el: ElementRef, private renderer: Renderer2) { }

   @HostListener('mouseenter') onMouseEnter() {
   if (!this.tooltip) { this.show(); }
     }

   @HostListener('mouseleave') onMouseLeave() {
   if (this.tooltip) { this.hide(); }
   }

   show() {
   this.create();
   this.setPosition();
   this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
   }

   hide() {
   this.renderer.removeClass(this.tooltip, 'ng-tooltip-show');
   //window.setTimeout(() => {
   this.renderer.removeChild(document.body, this.tooltip);
   this.tooltip = null;
   //}, this.delay);
   }

   create() {
   this.tooltip = this.renderer.createElement('span');

   this.renderer.appendChild(
   this.tooltip,
   this.renderer.createText(this.tooltipTitle) // textNode
    );

   this.renderer.appendChild(document.body, this.tooltip);
    // this.renderer.appendChild(this.el.nativeElement, this.tooltip);

   this.renderer.addClass(this.tooltip, 'ng-tooltip');
   this.renderer.addClass(this.tooltip, `ng-tooltip-${this.placement}`);

   // delay 
   this.renderer.setStyle(this.tooltip, '-webkit-transition', `opacity 
   ${this.delay}ms`);
   this.renderer.setStyle(this.tooltip, '-moz-transition', `opacity 
   ${this.delay}ms`);
   this.renderer.setStyle(this.tooltip, '-o-transition', `opacity 
   ${this.delay}ms`);
   this.renderer.setStyle(this.tooltip, 'transition', `opacity 
   ${this.delay}ms`);
   }

   setPosition() {
   const hostPos = this.el.nativeElement.getBoundingClientRect();

   const tooltipPos = this.tooltip.getBoundingClientRect();

    const scrollPos = window.pageYOffset || 
   document.documentElement.scrollTop || document.body.scrollTop || 0;

   let
   top, left;

   if (this.placement === 'top') {
   top = hostPos.top - tooltipPos.height - this.offset;
    left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
   }

   if (this.placement === 'bottom') {
   top = hostPos.bottom + this.offset;
   left = hostPos.left + (hostPos.width -
   tooltipPos.width) / 2;
   }

   if (this.placement === 'left') {
   top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
   left = hostPos.left - tooltipPos.width - this.offset;
   }

   if (this.placement === 'right') {
   top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
   left = hostPos.right + this.offset;
   }

   this.renderer.setStyle(this.tooltip, 'top', `${top + scrollPos}px`);
   this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
   }
  }

Answer 1

The problem is not with directive but in line 575 of engagement- fullview.component.ts:

concatData += data.restrictions[i].type

The data.restrictions[i] is null - repairt this and you will get solution.