Angular's :host, :host-context, ::ng-deep selectors

This article will give you an in-depth understanding of several special selectors in angular: host, :host-context, ::ng-deep. I hope it will be helpful to everyone!

1. :host

##:host means selecting the current component. [Related tutorial recommendations: "

angular tutorial"]

1.1 Select the host element

Use

:host Pseudo-class selector, used to select elements in the component host element (relative to the elements inside the component template). Without child elements, it is equivalent to selecting the entire host element.

If there is the following html:

<app-detail></app-detail>

The style of component

app-detail (the style of the entire app-detail) is as follows:

:host {
    display: inline-block;
    background: red;
}

Browser

Elements Select the app-detail element, the Style is as follows:

[_nghost-wtd-c445] {
    display: inline-block;
    background-color: red;
}

As you can see,

:host directly acts on The host element itself

1.2 Select the child elements of the host element

Can be found in

:host Add a selector later to select child elements . For example: :host h1 Position the h1 tag within the component view

:host h1 {
	color:red;
}

1.3 Conditionally select the host element

It will only take effect when the host is used as the target and has an active class.

:host(.active){
	border-width: 3px;
}

Like this:

<app-detail class="active"></app-detail>

2. :: ng-deep

::ng-deep can ignore the nested hierarchical relationship of the intermediate className. Directly find the className you want to modify.

When using some third-party components, you need to modify the style of the component. In this case, use.

2.1 From the host element to the current element Then go to all child h3 elements in the DOM, including h3 elements using third-party components in the current component

:host ::ng-deep h3 {
  font-style: italic;
}

2.2 Search for a specific type under a certain type

.card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
     height: 120px;
     margin-top: -16px;
}

3. :host-context

If a certain condition needs to be met before the style can be applied. It looks for CSS classes in the

ancestor nodes of the current component's host element, up to the document's root node. If is found, the following styles will be applied to the internal elements of this component.

3.1 Select the element in the component host element

:host-context {
	color:red;
}

3.2 Target the host with It will only take effect if there is an active classIn the following example, only if a

ancestor element

(host element can also be used) has a CSS classtheme-light, the background-color style will be applied to all c1a436a314ed609750bd7c7d319db4da elements inside of this component. <pre class="brush:css;toolbar:false;">:host-context(.theme-light) h2 { background-color: #eef; }</pre>

3.3 You can add a selector after :host-context to select sub-elements For example:

:host-context h1

Positioning the h1 tag in the component view <pre class="brush:css;toolbar:false;">:host-context h1{ color: hotpink; }</pre>

3.4 can be used to determine the internal conditions of a certain style

h1{
    color: hotpink;

    :host-context(.active) &{
        color: yellow;
    }
}

For more programming-related knowledge, please visit:

Programming Teaching

! !

The above is the detailed content of Angular's :host, :host-context, ::ng-deep selectors. For more information, please follow other related articles on the PHP Chinese website!