Angular 4 Tutorial - (Base Converter) Single Page App #11

Model driven forms in angular 4 provider way for two way binding, detect changes in data and much more. I will show you how to do two way data binding and detecting changes by creating base converter single page web app in angular 4.

ngModelChange in Angular 4.
ngOnInit in Angular 4.
change detection in angular 4.
model driven forms in angular 4.

Angular 4 Model Driven Forms:

Want to learn Angular JS 1?

Join facebook group:

[-andymel]

0:00 About the app being built in this video (Number converter using a model driven form)

02:01 Imported ReactiveFormsModule in ts file

02:11 CSS code

02:43 HTML code

03:41 FormGroup/FormControl from angular/forms and the ngOnInit function

05:12 Create automatically triggered functions on changes of the input elements

06:05 Add decimalChanged function in the ts code of the component

06:41 In the html form input element use "(ngModelChanged)" to call the function on change

07:36 Sending parameters (oldValue, newValue) to the function

10:04 Implement the decimalChanged function using form.patchValue(...)

13:55 Add check for empty fields to prevent errors

16:29 Do the same for when the other (not decimal) input fields are changed

17:45 Prevent stack overflow error because of changing the binary input field triggers the decimal function that changes the input field again and so on

27:40 Same for octal

32:10 Same for hexadecimal

[vikasrajkaradia]

Thank you for the process shown in this video, it works great but I do want to suggest a simpler approach to achieve the same task-
1. Use [{ngModel}] for two way binding and mark all the <input> with this.
2. Generate a Custom pipe to convert the values to different base
3. Display the values by adding those pipes
4. So if anyone change, then all the elements will have same values filtered by pipes
Please reply if you think that this will do good. Thank you.

[katbertt]

Hello, I'm new to angular, got a question here. I'm not seeing the function patchValue() in the code completion box (ctrl+space). Using VScode, tried sublime text 3 with the same result. The code compiles and runs. I can also go to FormGroup source code and locate that function there.

[akhilendrabhatia]

Can U built a Autocomplete form using Angular Material

[kadiridav]

Please, can you do a simple angular app that contains polymer components and communicates with Firebase? a progressive web application basically. Thanks

[adeelmalik]

Hello sir plz tell we what me what is noOnInit() and when to use it???

[asntube]

i'd like to download the source code...

[olabanjitajudeen]

Hi Mirza thanks for the tutorial, I''m confused about oldValue in the function is it really important? Whats the purpose?

[aqibrehman]

Try to give the source code as well. It takes a lot of time to write entire code

[virendrasingh]

I don't understand what's the use of "oldValue", why are we making it so confusing, why not just pass the new value that we want to convert to binary, octal and hexadecimal. try following KISS (Keep it simple, stupid) principle.

[blackwhiteyang]

"Maximum call stack size exceeded" oh kidding