import { Component, OnInit, Input, ElementRef } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.less']
})
export class DemoComponent implements OnInit {
	@Input() name: string;
	@Input() id: string;

  private exampleCode: any;
  private exampleDemo: any;
  private more: string = "ion-chevron-down";

  constructor( private element : ElementRef ) {

  }

  ngOnInit() {
    this.exampleDemo = this.element.nativeElement.querySelector('.example-demo');
    this.exampleCode = this.element.nativeElement.querySelector('.example-code');
    const _this = this;
    setTimeout(function(){
      _this.exampleCode.style.height = _this.exampleDemo.scrollHeight + "px";
    })
   
  }

  ngAfterContentInit(){

  }
  
  moreCode(event: any){
    if(this.more == "ion-chevron-down"){
      this.exampleCode.style.height = this.exampleCode.scrollHeight + "px";
      this.more = "ion-chevron-up";
    }else {
      this.exampleCode.style.height = this.exampleDemo.scrollHeight + "px";
      this.more = "ion-chevron-down";
    }
    return false;
  }

}