Learn About Angular 2/4/5/6/7

TypeScript is the new JavaScript:

TypeScript programming language by Microsoft has seen a tremendous success in the JavaScript community. TypeScript includes the concept of OOPS, Arrow functions, Types etc. which were not present in JavaScript earlier. You could run plain JavaScript or jQuery within a TypeScript file. So who wouldn’t want to code modern Angular applications with TypeScript? Assuming that you are comfortable working with TypeScript, let us now move on to the fundamentals of Angular.

Brief Intro into Angular Components:

Angular is the brain child of this world’s most informed company Google. Angular from the version of 2 is what we call as a component-based framework. Angular 2 Components, Angular 4 Components forms the foundation of Angular upto the versions of 7. So if you know Angular 2/4 well then 75% you already knew Angular 7.

Components in Angular are the basic building blocks of our Angular Application (till the version of 7).

An Analogy think of a web page with a registration page, login page and a Home Page. In my development experience I would be creating a Registration Component, a Login Component and a Home Component. It is also possible that a Home Page or any other page in itself will be made up of two or more components. Components are primarily reusable many number of times within an application.

Now it is time for us to understand the files that make up a component. Let us consider we are about to create a home component. A typical home component when created using Angular CLI would have the following files.

The files listed below are the elementary fragments of a component:

• home.component.html – An HTML file as a View File.
• home.component.css – A CSS file for styling your View/User Interface.
• home.component.ts – A Typescript file for making your Views functional and also for controlling the logic and data of your Frontend app. Note: “.ts” here represents a Typescript file.
• home.service.ts – A typescript file to integrate your frontend app to the backend/REST API.
• home.service.spec.ts – Don’t worry about this file as it is the unit test file for our service.
  Pro Tip: To improve the loading time of your apps the components in angular 6 will implement Lazy Loading. Here the components in angular 6 will have its own routing module along with the above described files. Hey performance savvy, Want to know about Lazy Loading the components in angular 6/7 project? Why don’t you take up the free angular 6/7 demo session online/classroom with Hope Tutors!

I have shown the typical files of a home component underneath:

Note: File structure above is applicable for Angular 4 Components and also for Angular 2 Components.

Sneak Peek into a component!

Frequent concepts you will be applying within an Angular Component is listed below:

• Data binding is of two types between a component’s HTML (.html) file and Typescript (.ts) file. The passing of data from the HTML to TS is called as Event Binding. The displaying of a data from TS to HTML is called as Property Binding.
• Got to know about two way Data Binding? Let’s discuss how it’s achieved in Angular in a separate article. Kindly wait with HOPE!
• An Array of items can be listed easily in HTML file using *ngFor Directive in Angular.
• A block of HTML div can be conditionally displayed/removed using *ngIf Directive in Angular.
• A Typescript class of the component will have the dynamic properties, event methods and the backend integration logic.Note: Even Angular 2 Components have all these above functionalities.

Angular 6 Component Communication!

I hope you remember that we were planning to create a register component, a login component and a home component. Communication is the essential use case of the web and internet. Communication between components is essential in Angular since it is a component based framework. Many times we need to pass data between components. Now, how do you communicate between components that you have created?

Options to accomplish communication amongst two or more Angular Components:

• Using @input and @output decorators in Angular.
• Using Service in Angular.
• Passing the reference of one component to the other one.
• Using @viewchild decorator provides us with advanced communication features. Like sharing the HTML reference part of one component to the other.Note: Even the Communication in Angular 2 Components take place in the above said manner.

Alright! Hope we delivered you with the right information about Angular Components. See you soon in another interesting tech article. Stay Tech Savvy with Hope Tutors.

To learn more about Angular or to avail a free demo about our classroom/online training; kindly press this free registration link at HOPE!