Angular Flashcards
Name the building blocks of Angular.
- Modules
- Components
- Templates
- Directives
- Data Binding
- Services
- Dependency Injection
- Routing
What’s transpiling in Angular?
Transpiling is the process of converting the typescript into javascript. Though typescript is used to write code in the Angular applications, the code is internally transpiled into javascript.
Which of the Angular life cycle component execution happens when a data-bound input value updates?
ngOnChanges is the life cycle hook that gets executed whenever a change happens to the data that was bound to an input.
What’s a lifecycle hook?
Directives and component instances have a lifecycle as Angular creates, updates, and destroys them. Developers can tap into key moments in that lifecycle by implementing one or more of the lifecycle hook interfaces in the Angular core library.
Differentiate between components and directives in Angular.
Components break up the application into smaller parts; Directives add behavior to an existing DOM element.
Give examples of different lifecycle hooks in angular
ngOnChanges: respond when angular resets data-bound input properties
ngOnInit: Initialize the directive/component after Angular first displays the data bound properties and sets the directive/component’s input properties
ngDoCheck: Detect and act upon changes that Angular can’t or won’t detect on its own. Called during every change detection run, immediately after ngOnChanges() and ngOnInit()
ngAfterContentInit(): Respond after Angular projects external content into the component’s view / the view that a directive is in. Called once, after the first ngDoCHeck()
ngAfterContentChecked(): Respond after angular checks the content project into the directive/component.
ngAfterViewInit: Respond after angular initializes the component’s views and child views/ the view that a directive is in. Called once after ngAfterContentChecked
ngAfterViewChecked: Respond after angular checks the component’s views and child views / the view that a directive is in. Called after the ngAfterViewInit and every subsequent ngAfterContentChecked
ngOnDestroy: Cleanup just before angular destroys the directive/component. Unsubscribe observables and detach event handlers to avoid memory leaks.
What is the use of @Input?
When it comes to the communication of Angular components, which are in Parent-child relationship; we use @Input in child components when we are passing data from parent to child.
What is the use of @Output
@Output is used in child component to receive an event from to parent component.
What is ng-content directive?
The HTML elements like p or h1 have some content between the tags. For example, <p>this is a small paragraph</p> and <h1>this is a heading</h1>. Now, similar to this, what if we want to have some custom text or content between the angular tags like some related tax content This will not work the way it worked for HTML elements. Now, in such cases, the tag directive is used.
What does a router.navigate do?
When we want to route to a component we use router.navigate. Syntax: this.router.navigate([‘/componentNmae’]);
What is ViewEncapsulation?
ViewEncapsulation decides whether the styels defined in a component can affect the entire application or not. There are three ways to do this in Angular:
Emulated: Styles from other HTML spread to the component.
Native: Styles from other HTML do not spread to the component
None: styles defined in a component are visible to all components
What are the services in angular and what command is used to create a service?
Services help us in not repeating the code. With the creation of services, we can use the same code for multiple components. To create a component, you use
ng g service NameOfService
What is dependency injection in Angular?
When a component is dependent on another component the dependency is injected/provided during runtime.
DI is a coding pattern in which a class asks for dependencies from external sources rather than creating them itself.
What are dependencies?
Dependencies in angular are services or objects that a class needs to perform its function.
What is routing in angular?
Routing helps a user navigate to different components using links.
How to handle events in Angular?
any activity (button click, mouse click, mouse hover) of a user on a frontend/web screen is termed as an event. Such events are passed from the view (.HTML) page to a typescript component (.ts).
What is RouterOutlet?
RouterOutlet is a substitution for templates rendering the components. In other words, it represents or renders the components on a template at a particular location.
Explain the usage of {{}}?
The set of brackets {{}} when used with an HTML tag, represent data from a component. For example, on a HTML page which has <h1>{{variableName}}</h1>, here the ‘variableName’ is actually typescript (component) data representing its value on the template, i.e. HTML. THis entire concept is called string interpolation.
In how many ways the data binding can be done?
Data binding happens between HTML (template) and typescript (component). Data binding can be done in 3 ways:
1) property binding
2) event binding
3) two-way data binding
What is the purpose of using package.json in the angular project?
With the existence of package.json, it will be easy to manage the dependencies of the project. If we are using typescript in the angular project, then we can mention the typescript package and version of typescript in package.json.
How is SPA (single page application) technology different from the traditional web technology?
In traditional web technology, the client requests for a web page (HTML/JSP/asp) and the server sends the resource (or HTML page), and the client again requests for another page and the server responds with another resource. The problem here is a lot of time is consumed in the requesting/responding or due to a lot of reloading. Whereas, in the SPA technology, we maintain only one page (index.HTML) even though the URL keeps on changing.
What is component in angular terminology?
A web page in angular has many components involved in it. A component is basically a bblock in which the data can be displayed on HTML using some logic written in typescript.
What are ngModel and how do we represent it?
ngModel is a directive which can be applied on a text field. This is a two-way data binding. ngModel is represented by [()].
What does a Subscribe method do?
it is a method which is subscribed to an observable. Whenever the subscribe method is called, an independent execution of the observable happens.
