import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; @Component({ selector: 'app-avatar-demo', templateUrl: './avatar-demo.component.html', styleUrls: ['./avatar-demo.component.scss'] }) export class AvatarDemoComponent implements OnInit { formGroup = new FormGroup({ avatar: new FormControl(''), avatar2: new FormControl('./assets/images/avatar-2.png'), avatar3: new FormControl('./assets/images/avatar-3.png'), avatar4: new FormControl('./assets/images/avatar-4.png') }) imgBase: string; cover = 'data:image/png;base64,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'; cover2 = './assets/images/avatar-a.png'; readonly = true; constructor() { } ngOnInit() { // console.log(this.formGroup.controls['avatar'] as FormControl); // (this.formGroup.controls['avatar'] as FormControl).valueChanges.subscribe((value: any) => { // console.log(value); // }) (this.formGroup.controls['avatar2'] as FormControl).valueChanges.subscribe((value: any) => { console.log(value); }) setTimeout(() => { this.readonly = false; }, 2000); } imgChange(event) { //console.log(event); } clickt(){ this.cover = './assets/2.jpg'; } }