Angular 4

Angular 4 – Understanding the basics

Angular_4_Basics

Hello guys, this post is part of complete tutorial series for Angular 4. As in the previous post, http://mytechthinking.in/2017/07/30/angular-4-tutorial-from-scratch/, we have set up the Angular CLI and created new Angular 4 application. In this post, we will learn the basics of Angular 4 which includes the components, selector, data binding and directives. Before we start, go to the application directory and start ng serve if not done already.

Components

Components are the basic building block of Angular SPA. It helps in organizing and maintaining the code. For example, we can create different components for header, body, side nav and footer. As we see already app-root component is created when creating the application using Angular CLI. So what is a component? In simple words, a component is a block of code which has its own template, styling and functionality and is represented by its selector. Let’s create a component to understand more about it. Components can be created easily by Angular CLI using the command ng g component component-name. The keyword stands for generate, we can use generate keyword too.

create-angular-4-new-componentAs you can see the Angular CLI has created 4 files and updated the app.module.ts. In the previous post, I have explained what does the created files contains and does. In short .css file contains the styling for the component and .html contains the HTML code for the component. The important file is the .ts that is the my-new-component.component.ts file. Let’s see the contents of this file.

angular-4-component-ts-content As in the first line, you can see the import Component from angular/core, which enables us to use a @Component decorator. The @Component tells the angular compiler that the below typescript class is of type Angular Component. The component decorator has a selector, template and style properties. Style one optional but other two are mandatory.


Selector: It is used to invoke the component inside the HTML tag. The selector property decided whether the component is going to be a tag or an attribute. Like ‘my-new-component’ says that the component is a tag whereas ‘[my-new-component]’ makes it an attribute which can be used in other tags.

component-invoke component-preview

template: The template provides the HTML structure of the component. We will see in examples how it works. Template can be inline (i.e. written directly in component.ts file ) or external (i.e. written in some other .html file). When using inline the property name should be template instead templateUrl ( which is used for external type HTML). For inline the code can single line like:

'<p> This is single Line html</p>' 

or

`<p>
This is multi line html
</p>`

single-line-templatesingle-line-template-preview
Single line template

multi-line-template
Multi line template

style: This property provides styling to the component and contains CSS codes. Like the template, style can also be inline as well as an external reference to the css file. But unlike template styleUrls accepts an array of CSS files and also this is an optional property to the component. Let’s see an example:
For writing CSS directly in the component.ts file:

styles: [`p 
color: red;
}
`]
}) 

css-inlinecss-inline-preview

For writing css in external file:

styleUrls: ['./my-new-component.component.css']

css-external

css-external-file
css-external-preview

In component.ts we have a typescript class where we can write the functionality or the business logic of the component. That we will be seeing later in the examples.
Also when a component is created Angular CLI add the component declaration in the app.module.ts which is important as the angular compiler will check only app.module.ts to search for a component.
app-module-ts

So, in this post we learned about the components in Angular 4, in the next tutorial, http://mytechthinking.in/2017/08/26/angular-4-tutorial-understanding-the-data-bindings/, we will learn about the data bindings in Angular 4.

Leave a Reply

Your email address will not be published. Required fields are marked *