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 allowedus to create reusable UI widget. Then your component used by any othercomponent. When you want to call nested component inside parent component youneed to add directive inside the template of that component in which you wantto 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.
Angular Interview Point Of View

Inline CSS:

  1. you can specify style inline in component HTML ofthe particular element so this will apply to that particular HTML element only.
Angular Interview Point Of View

Style Tag:

  1. You can specify style tag inside the component HTML.
Angular Interview Point Of View

Component Decorator style Property:

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

Angular Interview Point Of View

StyleUrl In component decorator:

  1. Create separate file for that style forrespective component and styleUrl is an array which contains different stylesheet. It is encapsulated in the component stylesheet and easily reusable. Wegot intellisense and application maintenance is easy also we have no collisionbetween our project style and component style.
Angular Interview Point Of View

You may also like...

Leave a Reply

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