title: Passing data to a function inside ngAfterViewInit() - Angular 6
body: <p>I am new to codding, I am created a canvas in angular, and I am trying to pass data 
  That I am receiving from my server to my function inside <code>ngAfterViewInit()</code>.</p>
  
  <p>The thing is when I am hard coding the values that I want to pass it works great,
  But if I passing this data after I received it from my server it throw a <code>undefined</code> error to the values inside the <code>ngAfterViewInit()</code>.</p>
  
  <p>I am trying to pass those values :</p>
  
  <pre><code>seatsNum: number
  rowsNum : number
  </code></pre>
  
  <p>To those :</p>
  
  <pre><code>  var numberOfSeats = this.seatsNum
    var numberOfRows = this.rowsNum
  </code></pre>
  
  <p>This the full code:</p>
  
  <pre><code>import { Component, Directive, ElementRef, AfterViewInit, Input, Renderer, ContentChild, ViewChildren, ViewChild } from '@angular/core';
  import { ManageShowsService } from '../../services/shows-mananger.service';
  import { Router, ActivatedRoute } from '../../../../node_modules/@angular/router';
  import { Show } from '../../models/show.model';
  import { DomSanitizer } from '../../../../node_modules/@angular/platform-browser';
  
  @Component({
    selector: 'app-seat-selection',
    templateUrl: './seat-selection.component.html',
    styleUrls: ['./seat-selection.component.scss']
  })
  export class SeatSelectionComponent {
    show: any
    tempOrderArrey = new Array()
    orderSeatsClinet = []    
    selectedSeatsClient = []
    selectedSeatsServer = [{ "id": 5 }, { "id": 19 }] 
  
    seatsNum: number
    rowsNum : number
  
  
    cX: number // X click cordinates
    cY: number // Y click cordinates  
  
  
    @ViewChild('canvas') canvasRef:ElementRef;
      private canvas: any;
      @Input('size') size: number;
      @Input('color') color: string;
      @Input() width: number;
      @Input() height: number;
  
      constructor(private el: ElementRef,
                  private renderer: Renderer,
                  private showService: ManageShowsService,
                  private route: ActivatedRoute,
                  private sanitzizer: DomSanitizer) {
  
  
  
      }
  
      sanitize(url:string){
          return this.sanitzizer.bypassSecurityTrustUrl('http://localhost:3000/' + url);
      }
      ngOnInit() {
          this.showService.getShowById(this.route.snapshot.params['id'])
              .subscribe(data =&gt; {
                  console.log(data)
                  this.seatsNum = data.showsHall[0].rows
                  this.rowsNum = data.showsHall[0].seats
  
                  this.show = {
                      "hallName": data.showsHall[0].hallName,
                      "movieName": data.movie[0].movieName,
                      "movieImg": data.movie[0].movieImg,
                      "takenSeats": data.takenSeats,
                      "_id": data._id,
                      "showDate": data.showDate,
                      "showStartTime": data.showStartTime,
                      "showEndTime": data.showEndTime,
  
                  }
                  console.log("form ts" + this.seatsNum, this.rowsNum)
              })
  
  
  
      }
  
  
  
  
  
  
      ngAfterViewInit() {
          this.canvas = this.canvasRef.nativeElement;
          this.canvas.width = 550;
          this.canvas.height = 500;
          this.draw();
  
      }
  
  
  
      draw() {
  
        var ctx = this.canvas.getContext('2d');
        ctx.font = "15px Arial";
        var seats = []                                    
        var tempOrderArrey = []                        
        var orderSeatsClinet = []                     
        var selectedSeatsClient = []                    
        var selectedSeatsServer = this.selectedSeatsServer
        var numberOfSeats = this.seatsNum
        var numberOfRows = this.rowsNum
        console.log("from js" + numberOfSeats, numberOfRows)
        var counter = 0    
        function make_base() {
          var base_image = new Image();
              base_image.src = ('../../../assets/img/screen2.png');
              base_image.onload = function () {
                  ctx.drawImage(base_image, 75, -110);
              }
      }
  </code></pre>