TypeScript classes with the @Component() decorator are an important part of Angular components. Common properties include the following

  1. Selector: CSS selector, which defines how to use a component in a template
  2. Template or templateURL: HTML template
  3. Styles or StyleUrls: A set of optional CSS styles

Let’s take a look at some of the less commonly used attributes.

changeDetection

Usage:

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

ChangeDetection is used to define changeDetection policies for the current component. When the component is instantiated, Angular creates a change detector that propagates changes to the component’s binding values. The value in the source code is: ChangeDetection? : ChangeDetectionStrategy, let’s look at the source code for ChangeDetectionStrategy

export declare enum ChangeDetectionStrategy {
    OnPush = 0,
    Default = 1
}

Default: Change policy to checkAlways, the Default. OnPush: Change the policy to CheckOnce (on demand). Always check, even if the properties in the component and the @Input property are not changed. Using ChangeDetectionStrategy. OnPush also is a kind of method to optimize performance, after all, it is on-demand detection, stop testing, but there are strict conditions to use it, or carelessly would have a bug, if the business to satisfy the following conditions, can be at ease use:

  • The component’s view changes only depend on@InputProperty changes, not if there are properties that depend on the component itself
  • when@InputProperty is not an object, or is an object@InputA property change is a way of changing the object itself (eg: obj = xxx ) rather than changing the way references are made ( eg: obj.propertyName = xxx ).

If the change to the @Input property is to change the way the reference is used or if you want to trigger the view to detect the change, you can also manually trigger the change using ChangeDetectorRef. Haha, I feel more and more talk, ChangeDetection can be written a separate article, if you need to know, I will open a separate article. The next one

viewProviders

To mention this requires an understanding of Dependency Injection, but DI is so much to learn that it deserves a separate explanation. This chapter is not focused on DI, so we won’t cover it too much. Viewproviders in the source code is: Viewproviders? : Provider[]; Note: If the object is not injected into the root module, or the module in which the component is located, then defining a ViewProvider is meaningless. Here we have a ServiceTemo service

@Injectable() // Note that we can't inject {providedIn: 'root'} into the root module. We can use export class serviceDemo everywhere... }

We add ServiceTemo to the ChildComponent’s viewProviders. ServiceTemo is not injected into either the root module or the module in which ChildComponent is located

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss'],
  viewProviders: [ServiceDemo]
})
export class ChildComponent implements OnInit {
  ...
}

We can only use the property or method of ServiceTemo in the View of ChildComponent. If we use it in the View of ChildComponent, we will get an error.

providers

Following that, if we want to use the property or method of ServiceTemo within the View and Component of ChildComponent, or only within the Component, we should add it to providers as follows:

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss'],
  providers: [ServiceDemo]
})
export class ChildComponent implements OnInit {
  ...
}

Viewproviders or providers are used in order to inject only providers into a component or component view. Providers must be used in a small range of wrapped objects, so that the injection into the root module will not affect the first screen loading.

encapsulation

The template and style packaging options used to define the Component. The value of encapsulation in the source code is encapsulation, right? : ViewEncapsulation, how does ViewEncapsulation define this

Export declare enum ViewEncapsulation {emencapsulation encapsulation = 0, // default Native = 1, // obsolete None = 2, ShadowDom = 3}

  • Emulated: This is the default option to add _NGHOST-XXX-XXX to the Host element. The _NGContent-XXX-XXX attribute to the non-host element simulates the native selector, which replaces the class and id to isolate the component’s style without affecting the external. Styles defined within a component are scoped only within that component.

    <app-parent _nghost-uvk-c19> <h1 _ngcontent-uvk-c19>parent component</h1> <p _ngcontent-uvk-c19>parent works! </p> <app-child _ngcontent-uvk-c19 _nghost-uvk-c20> <p _ngcontent-uvk-c20>child works</p> </app-child> </app-parent>
  • None: No template or style encapsulation is provided, meaning that styles within the component are added globally and applied throughoutdocument.
  • Shadowdom: Use nativeShadow DOMFeatures encapsulated and for componentsHostThe element is created ShadowRoot. The component style will not be affected by the global style. The scope of the style defined within the component is limited to that Shadow DOM. Using the ShadowDom The child components of a component are also applied to the component style, because the child components are also present ShadowRoot In the

interpolation

Overwrite the default interpolation start and stop delimiters ({{and}}). And its value is defined as interpolation? : [string, string]

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss'],
  interpolation: ['(', ')']
})

If you don’t like the {{value}} interpolation, you can change it to your preferred interpolation eg: (value)

preserveWhitespaces

This value is Boolean, false by default, and any whitespace characters that may be unnecessary are removed from the compiled template. Whitespace characters are those that match \s in JavaScript regular expressions. True is reserved.

entryComponents

A collection of components that should be compiled with the current component. For each component listed here, Angular creates a ComponentFactory and stores it in a ComponentFactoryResolver. Angular creates a ComponentFactory and stores it in a ComponentFactoryResolver. Check it out with me

If you define some components in your project that the compiler tool doesn’t recognize as being used in your project, the Tree Shaking tool will pull those components out of the final package. The routers need to be added explicitly to entryComponents. The routers need to be added to @NgModule’s entryComponents. The dynamically loaded components depend on the scope of their use. If they are only used in one or two components, you can add them to the component’s entryComponents

animations

The trigger used to introduce defining animations needs to be used in conjunction with @angular/animations, which I won’t focus on in this chapter

moduleId

The ID of the module that contains the component. Used when using CommonJS as a modularization tool, Angular uses the ES6 modularization syntax and is unlikely to use this property in everyday development.

There are also some properties that are inherited from the Directive decorator. We will continue with this in the next article. If you like it, please click “like”