Angular learning talks about Directive instructions
This article will take you to continue learning angular and briefly understand the use of Directive instructions in angular. I hope it will be helpful to everyone!
Directive is used to modify the DOM to add additional behavior to it. [Related tutorial recommendations: angularjs video tutorial, Programming video]
Angular built-in instructionsangular.cn/guide/built…
For example, *ngFor
commonly used in development is an instruction used to traverse and render DOM elements.
You can refer to the link below. I have written use cases for these instructions.
Here I will mainly introduce how to customize your own instructions
For example, we want the DOM background color to switch when the mouse moves in/out
<!-- 默认 鼠标移入时背景变成黄色 --> <p highlight>Highlight me!</p> <!-- 指定颜色 鼠标移入时背景变成红色 --> <p highlight="red">Highlight me!</p>
Let’s implement this example
import { Directive, ElementRef, HostListener, Input } from '@angular/core'; // Directive装饰器 可以接收一个对象参数 但是现在我们还不需要 @Directive() export class HighlightDirective { // 给这个指定定义一个 highlight 属性 @Input() highlight = 'yellow'; // 这里的 el 就是被我们的指令直接修饰的那个dom constructor(private el: ElementRef) { // 你可以在这里直接操作 dom } // 给这个dom定义一个mouseenter的监听器 后面的名字可以自定定义 @HostListener('mouseenter') onMouseEnter() { this.highlight(this.highlight); } // 添加鼠标移出的监听器 绑定对应的事件逻辑 @HostListener('mouseleave') onMouseLeave() { this.highlight(''); } private highlight(color: string) { this.el.nativeElement.style.backgroundColor = color; } }
For more programming-related knowledge, please visit:Programming Teaching! !
The above is the detailed content of Angular learning talks about Directive instructions. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The Node service built based on non-blocking and event-driven has the advantage of low memory consumption and is very suitable for handling massive network requests. Under the premise of massive requests, issues related to "memory control" need to be considered. 1. V8’s garbage collection mechanism and memory limitations Js is controlled by the garbage collection machine

Vue.js has become a very popular framework in front-end development today. As Vue.js continues to evolve, unit testing is becoming more and more important. Today we’ll explore how to write unit tests in Vue.js 3 and provide some best practices and common problems and solutions.

The file module is an encapsulation of underlying file operations, such as file reading/writing/opening/closing/delete adding, etc. The biggest feature of the file module is that all methods provide two versions of **synchronous** and **asynchronous**, with Methods with the sync suffix are all synchronization methods, and those without are all heterogeneous methods.

Cross-domain is a scenario often encountered in development, and it is also an issue often discussed in interviews. Mastering common cross-domain solutions and the principles behind them can not only improve our development efficiency, but also perform better in interviews.

PHP and Vue: a perfect pairing of front-end development tools. In today's era of rapid development of the Internet, front-end development has become increasingly important. As users have higher and higher requirements for the experience of websites and applications, front-end developers need to use more efficient and flexible tools to create responsive and interactive interfaces. As two important technologies in the field of front-end development, PHP and Vue.js can be regarded as perfect tools when paired together. This article will explore the combination of PHP and Vue, as well as detailed code examples to help readers better understand and apply these two

At the beginning, JS only ran on the browser side. It was easy to process Unicode-encoded strings, but it was difficult to process binary and non-Unicode-encoded strings. And binary is the lowest level data format of the computer, video/audio/program/network package

With the development of Internet technology, front-end development has become increasingly important. Especially the popularity of mobile devices requires front-end development technology that is efficient, stable, safe and easy to maintain. As a rapidly developing programming language, Go language has been used by more and more developers. So, is it feasible to use Go language for front-end development? Next, this article will explain in detail how to use Go language for front-end development. Let’s first take a look at why Go language is used for front-end development. Many people think that Go language is a

As a C# developer, our development work usually includes front-end and back-end development. As technology develops and the complexity of projects increases, the collaborative development of front-end and back-end has become more and more important and complex. This article will share some front-end and back-end collaborative development techniques to help C# developers complete development work more efficiently. After determining the interface specifications, collaborative development of the front-end and back-end is inseparable from the interaction of API interfaces. To ensure the smooth progress of front-end and back-end collaborative development, the most important thing is to define good interface specifications. Interface specification involves the name of the interface
