Angular Interview Questions
What is Angular?
Angular is a front-end Javascript framework developed by Google. It simply makes use of tree of components which are interconnected with each other and under the hood, it also makes use of dependency injection which makes it more powerful. Angular itself is written in Typescript; however, apart from Typescript, you can use other languages such as Dart and Javascript (ECMA 5, ECMA 6, ECMA 7) to create Angular application.
What is the use of decorator in Angular?
Decorator in Angular is simply a way of notifying Angular that what your Typescript class, function, or property is all about. For example, when you make use of Component decorator on the top of a Typescript class, it has some metadata such as templateUrl, selector, providers etc.
By using a Component decorator, you will notify Angular to establish a relationship between template and Typescript class because we are going to use it for view. When you add decorators like @Input() or @Output, then it will tell angular that we are going to have some custom property or event for component. Also, when you make use of @Injectable() decorator in Typescript class, then this will tell Angular that we are going to use it as service.
What is Component Decorator?
Component decorator is just a function behind the scenes which takes Object literal as parameter also known as metadata of your component. This object contains below given properties:
Selector: This will be your custom HTML tag, which you can use in other components template file to render it. The selector is always case sensitive and by convention, if your custom tag has 2 words in it, then we will separate them by hyphen. For example, if your selector is appemployee, then make it app-employee and in other components template, you will use it as <app-employee></app-employee> to render it.
Template/templateUrl: This will contain link to a HTML file or set of HTML elements. This is what you will see when you try to render your component in any other component using its Selector.
What is the use of NgModule Decorator in AppModule.ts?
NgModule is also known as Angular Module. The job of this decorator is to make aware your Angular application of the components, services, imports, etc that you are going to use. Like Component Decorator, it also takes an Object literal as parameter. The object contains below given properties.
Declaration: This will contain an array of components which you are going to use in your application.
Bootstrap: This can contain an array of entry components which will be loaded during the application launch. By convention, it will only have 1 component and that will be your root component (AppComponent). Since all other components are declarative and will be child components, you will generally load them by routing and you don’t need to put them in this Bootstrap array. You only enter multiple components when you want to bootstrap multiple apps. Just look over the following code to get a clear picture.
@NgModule({
imports: [],
declarations: [App1, App2, App3],
bootstrap: [App1, App2, App3]
})
export class BaseModule {}
<body> <app1>App1</app1> <app2>App2</app2> <app3>App3</app3> </body>
As per Angular docs:
The @NgModule.bootstrap property tells the compiler that this is an entry component and it should generate code to bootstrap the application with this component.
What is the use of Main.ts file?
Main.ts file also known as Bootstrap file which plays major role in bootstrapping your application. In AppModule.ts file, we add entry component with the help of NgModule Decorator property bootstrap. Now, we need an entry module which by convention is always AppModule. For this purpose, we have Main.ts file with the following given code.
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
