AngularAs the most popular front-end framework at present, it is generally welcomed by front-end developers. Whether you are new to Angular or a developer with some Angular development experience, understanding the 12 classic interview questions in this article will be an excellent way to deeply understand and learn the knowledge and concepts of Angular 2.
In this article, we will be exposed to many important concepts of Angular 2, and attached are extended reading materials and self-examination tests for everyone to evaluate their understanding of Angular.
1. Please explain what are the life cycle hooks of Angular 2 applications?
Angular 2 components/directives have life cycle events, which are managed by @angular/core. @angular/core creates the component, renders it, and creates and renders its descendants. When the data binding properties of @angular/core change, the handling changes, destroying its template before removing it from the DOM. Angular provides a set of life cycle hooks (special events) that can be branched into the life cycle and perform operations when needed. The constructor is executed before all life cycle events. Each interface has a hook method prefixed with ng. For example, the OnInit method of the ngOnint interface, this method must be implemented in the component.
Some events are applicable to components/directives, while a few events are only applicable to components.
ngOnChanges: Responds when Angular sets its data-bound properties that receive the current and previous object values.
ngOnInit: After the first ngOnChange trigger, initialize the component/directive. This is the most commonly used method for retrieving a template's data from a backend service.
ngDoCheck: Detect and execute when the Angular context changes. Will be called every time change detection is run.
ngOnDestroy: Clear before Angular destroys the directive/component. Unsubscribe from observables and disengage event handlers to avoid memory leaks.
Component specific hooks:
ngAfterContentInit: The component content has been initialized
ngAfterContentChecked: Outside of Angular checks for bindings projected into its view After the content.
ngAfterViewInit: After Angular creates the component’s view.
ngAfterViewChecked: After Angular checks the binding of the component view.
2. What are the advantages of using Angular 2 compared to using Angular 1?
Angular 2 is a platform, not just a language
Better speed and performance
Simpler dependency injection
Modular, cross-platform
With the benefits of ES6 and Typescript.
Flexible routing with lazy loading function
Easier to learn
3. How does routing work in Angular 2?
Routing is a mechanism that enables users to navigate between views/components. Angular 2 simplifies routing and provides flexibility to configure and define at the module level (lazy loading).
Angular applications have a single instance of the router service, and whenever the URL changes, the corresponding route is matched against the route configuration array. On a successful match, it applies the redirect, at which point the router builds a tree of ActivatedRoute objects, including the router's current state. Before redirecting, the router will check whether the new state is allowed by running the guard (CanActivate). Route Guard is simply an interface method that routers run to check route authorization. Once the protection is running, it parses the routing data and activates the router state by instantiating the required components into
.
4. What is an event emitter? How does it work in Angular 2?
Angular 2 does not have a bidirectional digest cycle, which is different from Angular 1. In Angular 2, any changes that occur in a component are always propagated from the current component to all its child components. If changes to a child component need to be reflected in the hierarchy of its parent component, we can emit events by using the event emitter API.
In short, EventEmitter is a class defined in the @angular/core module and used by components and directives to emit custom events.
@output() somethingChanged = new EventEmitter();
We use somethingChanged.emit(value) method to emit the event. This is typically used in setters when a value in the class has been changed.
You can use the subscription method to implement event emission subscription through any component of the module.
#5. How to use codelyzer in Angular 2 application?
All enterprise applications follow a set of coding conventions and guidelines to maintain the code in a better way. Codelyzer is an open source tool for running and checking whether predefined coding guidelines are followed. Codelyzer only performs static code analysis on Angular and TypeScript projects.
Codelyzer runs on top of tslint, and its coding conventions are usually defined in the tslint.json file. Codelyzer can be run directly through Angularcli or npm. Editors like Visual Studio Code and Atom also support codelyzer, which only requires a basic setup.
To set up codelyzer in Visual Studio Code, we can add the path to the tslint rule in File - > Options - > User Settings.
Code run from cli: ng lint.
Code run from npm: npm run lint
Extended reading:
https ://github.com/mgechev/codelyzer
https://www.youtube.com/watch?v=bci-Z6nURgE
6. What is lazy loading? How to enable lazy loading in Angular 2?
Most enterprise applications contain a variety of modules for specific business cases. Bundling the entire application code and loading it creates a huge performance overhead on the initial call. Lazy loading allows us to load only the modules that the user is interacting with, while the rest are loaded on demand at runtime.
Lazy loading speeds up the initial loading process of an application by splitting the code into multiple packages and loading them on demand.
Every Angular application must have a main module called AppModule. The code should be divided into different sub-modules (NgModules) based on the application business case.
Plunkr example with lazy loading enabled:
We don’t need to import or declare lazy loading modules in the root module.
Add the route to the top-level route (app.routing.ts) and set loadChildren. loadChildren will get the absolute path from the root folder. RouterModule.forRoot() will get the routes array and configure the router.
Import module specific routes in submodules.
In submodule routing, specify the path as the empty string "", which is an empty path. RouterModule.forChild will again use the route array to load and configure the router for the submodule component.
Then, export the const route: ModuleWithProviders = RouterModule.forChild(routes);
7. In Angular 2 What security threats should we pay attention to in applications?
Just like any other client or web application, Angular 2 applications should also follow some basic guidelines to mitigate security risks. Some of them are:
Avoid using/injecting dynamic HTML content for your components.
If you use external HTML, that is, from somewhere outside the database or application, then you need to clean it.
Don't put external URLs in the application unless it is trusted. Avoid URL redirection unless it is trusted.
Consider using AOT compilation or offline compilation.
Prevent XSRF attacks by restricting APIs and choosing apps that use known or safe environments/browsers.
8. How to optimize Angular 2 applications for better performance?
Optimization depends on the type and size of the application and many other factors. But generally speaking, when optimizing an Angular 2 application, I would consider the following:
Consider AOT compilation.
Make sure the application has gone through bundling, uglify and tree shaking.
Ensure that there are no unnecessary import statements in the application.
Make sure that unused third-party libraries have been removed from the application.
All dependencies and dev-dependencies are clearly separated.
If the application is larger, I would consider lazy loading instead of a fully bundled application.
9. How to implement a custom type without editor warnings?
In most cases, the third-party library comes with its .d.ts file for type definition. In some cases we need to extend an existing type by providing it with some more properties, or if we need to define other types to avoid TypeScript warnings.
If we need to extend the type definition of an external library, a good approach is that instead of making changes to the node_modules or existing typings folder, we create a new file named "custom type" folder to store all custom types.
To define the type of application (JavaScript/Typescript) object, we should define the interface and entity class in the models folder of the corresponding module of the application.
For these cases, we can define or extend the type by creating our own ".d.ts" file.
10. What is Shadow DOM? How does it help Angular 2 perform better?
Shadow DOM is part of the HTML specification that allows developers to encapsulate their own HTML markup, CSS styles and JavaScript. Shadow DOM, along with other technologies, enables developers to build their own first-level tags, Web components and APIs like the
