One of the reasons I love angular so much is the out of the box features it comes with. Angular provides almost everything out of the boxthat you need to set up a typical web application. Angular team also provides the material library with helpful components that are well tested and ready to use. There is so much convenience that as an angular developer, we enjoy. That’s great!
**But, our applications are not always typical! **We might need to implement very complex behaviour inside our applications to meet the business logic.
This process of meeting business logic sometimes may include having a custom built form control. For example, you may need to create a fancy looking custom search component that you need to reuse throughout the application. On a different application, you may need a quiz component, that can be wired up with form control to facilitate reusability and extensibility. Something like this, maybe👇
Quiz component
This above component is what we have on focus today!
How would you build it?
The naive way to go about it is to not use a custom component at all. We can repeat code needed to build it and use *ngFor to loop through and use ngModel or formControl with it. That can give you a working code. But, what if you want to reuse this else where on you application? yes, you will have to repeat the code. We all know repeating code is not the way to do it, is it?
A better initial thought of mine was to create a custom component, call it quiz.component.ts, add an event listener to the component using@``[Output](https://angular.io/api/core/Output)``,listen for the event on parent and manually change the answer on parent component.
That could work. But hey, what if I want to bind it using [[(ngModel)]](https://angular.io/api/forms/NgModel)? or what if I want to use it with [formControl](https://angular.io/api/forms/FormControl)``?
That seems not straight forward, doesn’t it?
But fortunately, there is a convenient way angular provides to do this.
Let’s see how!
#angular #forms #javascript #angularjs #javascript-tips #control value accessor
