Angular Interview Point Of View

Angular Explanation Part 1- By Sagar Jaybhay

Component

It is the basic building block of an angular and it has a view called a template and decorator.

Component consists of

  1. Template: it defines a user interface which contains HTML and, directives and data bindings.
  2. Class: It contains the code required for view template. It contains properties and methods.
  3. Decorator: We use decorator component provided by angular which adds Metadata to the class. When we add decorator over component then the class becomes Component.
  4. By convention root component in Angular is called AppComponent and file name as app.component.ts
  5. Template Property in Component: If you have single line HTML you can use single or double quotes but if have multi line HTML then you have to use backtick character.
  6. TemplateUrl Property: this is used for if you have a separate HTML page for your component then used this. When your view templates longer than 3 lines used HTML page then only.
  7. Selector property: This is referred in the index HTML page for adding our component view. The selector is used as a directive where we want to call our component.

AppModule

It is a root module which bootstraps the angular application. In app.module we import 2 system module and browser module. In this browsermodule is used for all angular application which runs inside a browser. Browser module provides ng-if and ngFor.

NgModule

  1. : It is used to add meta-data to angular class. Like angular component add meta-data to angular class component similar way NgModule add meta-data to angular app.module.
    • Imports: it import browsermodule which required by all angular module to run inside the browser.
    • Declarations: it is an array which is used for registering a new component.
    • Bootstrap: it contains root component which bootstraps our application.

Nested Component:

Angular 2 is all about the component. The component is allowed us to create reusable UI widget. Then your component used by any other component. When you want to call nested component inside parent component you need to add directive inside the template of that component in which you want to call that child component.

Imp: When you declared a variable inside the component and used that variable in HTML file then you need to assign the type of that variable inside that component class.

Different ways of styling component:

  1. If you write code in the style.css present in src folder in outside of respective component it is applicable to all of component through-out application. But then if you change the style for a specific element then it will apply to rest of the element also.
Sagar Jaybhay Angular style

Inline CSS:

  1. you can specify style inline in component HTML of the particular element so this will apply to that particular HTML element only.
Sagar Jaybhay Angular style 2

Style Tag:

  1. You can specify style tag inside the component HTML.
Sagar Jaybhay Angular style 3

Component Decorator style Property:

Advantage is applicable to self HTML only but the drawback is no intellisence is present for this style of code.

Sagar Jaybhay Angular style 4

StyleUrl In component decorator:

  1. Create separate file for that style for respective component and styleUrl is an array which contains different style sheet. It is encapsulated in the component stylesheet and easily reusable. We got intellisense and application maintenance is easy also we have no collision between our project style and component style.
Sagar Jaybhay Angular style 5

Sagar Jaybhay, from Maharashtra, India, is currently a Senior Software Developer at Software Company. He has continuously grown in the roles that he has held in the more than seven years he has been with this company. Sagar Jaybhay is an excellent team member and prides himself on his work contributions to his team and company as a whole.

Sagar Jaybhay

Sagar Jaybhay, from Maharashtra, India, is currently a Senior Software Developer at Software Company. He has continuously grown in the roles that he has held in the more than seven years he has been with this company. Sagar Jaybhay is an excellent team member and prides himself on his work contributions to his team and company as a whole.

You may also like...

Leave a Reply

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