1/** 2 * Copyright (C) 2018 The Android Open Source Project 3 * 4 * Licensed under the Apache License, Version 2.0 (the "License"); 5 * you may not use this file except in compliance with the License. 6 * You may obtain a copy of the License at 7 * 8 * http://www.apache.org/licenses/LICENSE-2.0 9 * 10 * Unless required by applicable law or agreed to in writing, software 11 * distributed under the License is distributed on an "AS IS" BASIS, 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 * See the License for the specific language governing permissions and 14 * limitations under the License. 15 */ 16import {Directive, EventEmitter, HostBinding, HostListener, Input, Output, TemplateRef, ViewContainerRef} from '@angular/core'; 17 18 19@Directive({ 20 selector: '[appCdkDetailRow]' 21}) 22export class CdkDetailRowDirective { 23 private row: any; 24 private tRef: TemplateRef<any>; 25 private opened: boolean; 26 27 @HostBinding('class.expanded') 28 get expended(): boolean { 29 return this.opened; 30 } 31 32 @Input() 33 set appCdkDetailRow(value: any) { 34 if (value !== this.row) { 35 this.row = value; 36 // this.render(); 37 } 38 } 39 40 @Input('appCdkDetailRowTpl') 41 set template(value: TemplateRef<any>) { 42 if (value !== this.tRef) { 43 this.tRef = value; 44 } 45 } 46 47 @Output() toggleChange = new EventEmitter<CdkDetailRowDirective>(); 48 49 constructor(public vcRef: ViewContainerRef) { } 50 51 @HostListener('click') 52 onClick(): void { 53 this.toggle(); 54 } 55 56 toggle(): void { 57 if (this.opened) { 58 this.vcRef.clear(); 59 } else { 60 this.render(); 61 } 62 this.opened = this.vcRef.length > 0; 63 this.toggleChange.emit(this); 64 } 65 66 private render(): void { 67 this.vcRef.clear(); 68 if (this.tRef && this.row) { 69 this.vcRef.createEmbeddedView(this.tRef, { $implicit: this.row }); 70 } 71 } 72} 73