Angular Interview Question 121-130

121.   What is a builder?

      A builder function ia a function that uses the `Architect API` to perform a complex process such as "build" or "test". The builder code is defined in an npm package. For example, BrowserBuilder runs a webpack build for a browser target and KarmaBuilder starts the Karma server and runs a webpack build for unit tests.

    

 122.   How do you invoke a builder?

      The Angular CLI command `ng run` is used to invoke a builder with a specific target configuration. The workspace configuration file, `angular.json`, contains default configurations for built-in builders.

    

 123.   How do you create app shell in Angular?

      An App shell is a way to render a portion of your application via a route at build time. This is useful to first paint of your application that appears quickly because the browser can render static HTML and CSS without the need to initialize JavaScript. You can achieve this using Angular CLI which generates an app shell for running server-side of your app.

      ```javascript

      ng generate appShell [options] (or)

      ng g appShell [options]

      ```

    

 124.   What are the case types in Angular?

      Angular uses capitalization conventions to distinguish the names of various types. Angular follows the list of the below case types.

      1. **camelCase :** Symbols, properties, methods, pipe names, non-component directive selectors, constants uses lowercase on the first letter of the item. For example, "selectedUser"

      2. **UpperCamelCase (or PascalCase):** Class names, including classes that define components, interfaces, NgModules, directives, and pipes uses uppercase on the first letter of the item.

      3. **dash-case (or "kebab-case"):** The descriptive part of file names, component selectors uses dashes between the words. For example, "app-user-list".

      4. **UPPER_UNDERSCORE_CASE:** All constants uses capital letters connected with underscores. For example, "NUMBER_OF_USERS".

    

 125.   What are the class decorators in Angular?

      A class decorator is a decorator that appears immediately before a class definition, which declares the class to be of the given type, and provides metadata suitable to the type

      The following list of decorators comes under class decorators,

      1. @Component()

      2. @Directive()

      3. @Pipe()

      4. @Injectable()

      5. @NgModule()

    

 126.   What are class field decorators?

      The class field decorators are the statements declared immediately before a field in a class definition that defines the type of that field. Some of the examples are: @input and @output,

      ```javascript

      @Input() myProperty;

      @Output() myEvent = new EventEmitter();

      ```

    

 127.   What is declarable in Angular?

      Declarable is a class type that you can add to the declarations list of an NgModule. The class types such as components, directives, and pipes comes can be declared in the module.

    

 128.   What are the restrictions on declarable classes?

      Below classes shouldn't be declared,

      1. A class that's already declared in another NgModule

      2. Ngmodule classes

      3. Service classes

      4. Helper classes

    

 129.   What is a DI token?

      A DI token is a lookup token associated with a dependency provider in dependency injection system. The injector maintains an internal token-provider map that it references when asked for a dependency and the DI token is the key to the map. Let's take example of DI Token usage,

      ```javascript

      const BASE_URL = new InjectionToken<string>('BaseUrl');

      const injector =

         Injector.create({providers: [{provide: BASE_URL, useValue: 'http://some-domain.com'}]});

      const url = injector.get(BASE_URL);

      ```

    

 130.   What is Angular DSL?

      A domain-specific language (DSL) is a computer language specialized to a particular application domain. Angular has its own Domain Specific Language (DSL) which allows us to write Angular specific html-like syntax on top of normal html. It has its own compiler that compiles this syntax to html that the browser can understand. This DSL is defined in NgModules such as animations, forms, and routing and navigation.

      Basically you will see 3 main syntax in Angular DSL.

      1. `()`: Used for Output and DOM events.

      2. `[]`: Used for Input and specific DOM element attributes.

      3. `*`: Structural directives(*ngFor or *ngIf) will affect/change the DOM structure.