[Part-2] Directives and DOM in Angular

Hello friends, in previous article we have seen installation of angular, how to create an angular project and how to run it. If you have not seen that article, please go through the link which I have attached at the end to better understand the concept.

Today, let us learn about directives and DOM in angular.

• When we run our application, angular framework will create some folders by default which you can see under your project folder.
• For now let us focus on important files under app folder as shown below.

1. ‘app.component.html’ file gives our site a view. It includes code to create button, text box,etc
2. ‘app.component.ts’ file includes logic behind the view. It is also known as component.
3. ‘app.component.css’ file is used for styling the html page.
4. ‘app.component.spec.ts’ is used for testing. For now forget about it. We will discuss it later.
5. ‘app.module.ts’ includes packages or dependencies which are required in project.

Let us understand this through one simple form.

• In ‘app.component.html’ file, I have created one text box and one button as shown below.

• So friends, here ‘Patient Name’ is a text and in the front there is an <input> tag of type text.
• In VS code you don’t need to type all, just type input and after that intellisense will give you the list so choose from that what type of input you want to give.
• After that we have created one button which will call the method MyClick() on click. And definition of this method is present in ‘app.component.ts’ file as shown below.

• Don’t feel afraid by seeing this code, we have written only the code inside the class AppComponent. All of the rest is by default present over there.
• So in AppComponent class, we have created one variable which will store the patient name which we enter in textbox when we run our application in browser.
• Also we have written MyClick() method which will print that patient name in alert box when we click the button on page.
• Now let us see what is ngModel which we have used in app.component.html file.

ngModel :

ngModel is an directive or code in angular which changes the behavior of html tag.

Function of Angular Directive

• The above figure describes how ngModel directive works in our application. Basically it is used for binding of front end text box or buttons to the back end variables or methods, so that we can store the values entered by user or perform some functions.
• In similar manner, to bind button on page with MyClick() method we have used (click) as shown in ‘app.component.html’ file.
• So now as you can see for click we have used round brackets () and for ngModel we have used [()]. Let us understand what it means ?

Type of bindings in angular :

So there are two type of bindings : One way binding and two way binding.

1. If you want to send data from view to component, you have to use round brackets- ().
2. If you want to send data from component to view, you have to use square brackets- [].
3. If you want to send data from view to component as well as from component to view i.e.(two way binding), you have to use round brackets inside the square brackets like this [()].

Bindings in Angular

Now let us run our application and see what happens ?

• As you can see in above figure, when I entered value in textbox and pressed the Click button, it has popped up an alert box displaying the name which I have entered in the textbox.
• If you get blank screen after running an application, press F12 and go to the console section and in that go to errors.
• If all other code is correct as I have shown above then one error you might get is as below,

• Here to find exactly where error has occurred, just focus on ERROR which I have indicated in box by blue square. An above error says that I have not understood [(ngModel)].
• So let me explain why this happen.

DOM :

So friends there are two things. One is HTML DOM and another is Angular DOM. DOM means Document Object Model.

• When html loads in browser, it will create in-memory space i.e. DOM which includes window object in that we have document object in that we have forms object. So if you want to set value to textbox, you need to go through this DOM.
• After loading of HTML DOM, the DOM in angular i.e. Angular DOM is loaded which will parse ngModel, click and other directives.
• To solve the above error you need to go to the package.json file in your project which has different packages.
• An angular gives you the ability to load this packages as per your requirement which will make your project compact.

package.json in angular

• As you can see in above figure, we have different dependencies and we can load it as per our requirement.
• So here for compiling you have compiler package, for UI or textbox or ngModel you have forms package, for http request or validation you have common package, for animations to provide user best experience you have animations package.
• So if you want to use this packages in your project then you have to load it in ‘app.module.ts’ file. And this will might be the cause of error if you get blank screen since angular DOM is not understanding ngModel.
• So just go to module file and import forms module from package.json as I have shown below in red boxes,

• After this error will be solved and you will able to run your application.

Friends, I hope you enjoyed the learning process. Please give me your valuable feedback. Thank You !

[Part-1] Introduction to Angular

[Part-2] Directives and DOM in Angular

[Part-3] Camel case and Pascal case

[Part-4] Routing for navigation in Angular

If you want to learn more about angular in a hour please go through the below video :