Intercepting the value change of an @input()
I am working on a component that handles pictures upload, for various reasons, the real upload happens externally.
It’s possibile to integrate it in a form or pass to it a callback that is fired after the files are selected.
When I use it within a form, I have another component for showing a progressbar, when I pass to it a callback, I use the embedded progressbar.
The embedded progressbar, needs to know the percentage of the upload, I pass it throught an @input(), when it reaches 100 I want to make the progressbar desappear and get my icon back.
So how to intercept the value?
|
1 |
<pics-upload class="camera" iconname="camera" iconsize="3em" show_preview="false" [progress]="upload_progress" [btnCallback]="uploadPic "iconcolor="#ffffff"></pics-upload> |
Well, we have two methods:
1) ngOnChanges
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { [...............], OnChanges } from '@angular/core'; export class PicsUploadComponent implements ControlValueAccessor,OnChanges { //Here we have the changes for all @input() so with (loadash) _.get I take just what I need ngOnChanges(changes: any) { let progress_value = _.get(changes,'progress.currentValue'); if (progress_value == 100) { setTimeout(()=>{ this.progress = 0; //this makes the progress disappear this.read_preview=null; //this makes the icon appear },2000); } } |
2) set,get
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
private _progress: number; @Input() set progress(value: number) { this._progress = value; if (value == 100) { setTimeout(()=>{ this.progress = 0; //this makes the progress disappear this.read_preview=null; //this makes the icon appear },2000); } } get progress(): number { return this._progress; } |