Home Web Front-end JS Tutorial Advanced Angular component pattern examples

Advanced Angular component pattern examples

Jan 11, 2018 pm 04:17 PM
angular Example model

Angular has now reached version 5.x. For the MVVM framework, I first came into contact with angularjs and later switched to react. Later, I changed jobs and switched to the previous angularjs due to the project technology stack. In actual work I have implemented front-end reconstruction work in several important projects of the company. During this process, I gradually realized that for the MVVM framework itself, at the usage level, it is necessary to master some common patterns, especially the components that are now very popular. development. In this way, we can seamlessly (or spend very little time and cost) convert to any MVVM framework in actual work, and use the saved time to learn new knowledge.

I have been following the blog of Angular In Depth recently. I occasionally saw this series of articles and felt that the quality was quite high, so I took the time to translate and share it with everyone, and included it every time. I added a little bit of my own humble opinion at the end of this article, hoping to achieve the effect of inspiring others. If my opinion is wrong, please feel free to comment.

Like Kent C. Dodds Advanced React Component Patterns, we'll illustrate these patterns using a relatively simple <toggle> component. <toggole>The component's responsibility is only to manage a simple Boolean state property: on. The purpose of illustration using such simple components is so that we can devote more attention to patterns that are more complex than the components themselves.

Through this series of articles, I will provide links to fully functional, runnable demo code. You just need to focus on the app folder and the toggle folder. toggleThe folder contains some reusable libraries (a series of components). Of course, this library will change as the article progresses. The app folder and specifically the app.component.html will be changed accordingly for how the library is used in different situations.

We will start with the original toggle component version. It only has an on attribute that uses the @Input() decorator. The state controlled by this attribute represents the switch state of the component itself. At the same time, it also has an on attribute that uses the @Output()The

toggle

event emitter of the decorator, this event emitter will notify the parent component when the component switch state changes.

Related recommendations:

Methods to introduce external styles into Angular components

Two types of Angular pop-up modal boxes Method

AngularJS tutorial and example code analysis######

The above is the detailed content of Advanced Angular component pattern examples. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What does WeChat's Do Not Disturb mode do? What does WeChat's Do Not Disturb mode do? Feb 23, 2024 pm 10:48 PM

What does WeChat Do Not Disturb mode mean? Nowadays, with the popularity of smartphones and the rapid development of mobile Internet, social media platforms have become an indispensable part of people's daily lives. WeChat is one of the most popular social media platforms in China, and almost everyone has a WeChat account. We can communicate with friends, family, and colleagues in real time through WeChat, share moments in our lives, and understand each other’s current situation. However, in this era, we are also inevitably faced with the problems of information overload and privacy leakage, especially for those who need to focus or

What is sleep mode used for on iPhone? What is sleep mode used for on iPhone? Nov 04, 2023 am 11:13 AM

iOS devices have long been able to track your sleep patterns and more using the Health app. But isn’t it annoying when you’re disturbed by notifications while you’re sleeping? These notifications may be irrelevant and therefore disrupt your sleep patterns in the process. While Do Not Disturb mode is a great way to avoid distractions while sleeping, it can cause you to miss important calls and messages you receive during the night. Thankfully, this is where sleep mode comes in. Let’s learn more about it and how to use it on iPhone. What role does sleep mode play on the iPhone? Sleep mode is a dedicated focus mode in iOS that is automatically activated based on your sleep schedule in the "Health" App. It helps you set an alarm and then

How to install Angular on Ubuntu 24.04 How to install Angular on Ubuntu 24.04 Mar 23, 2024 pm 12:20 PM

Angular.js is a freely accessible JavaScript platform for creating dynamic applications. It allows you to express various aspects of your application quickly and clearly by extending the syntax of HTML as a template language. Angular.js provides a range of tools to help you write, update and test your code. Additionally, it provides many features such as routing and form management. This guide will discuss how to install Angular on Ubuntu24. First, you need to install Node.js. Node.js is a JavaScript running environment based on the ChromeV8 engine that allows you to run JavaScript code on the server side. To be in Ub

Do Not Disturb Mode Not Working in iPhone: Fix Do Not Disturb Mode Not Working in iPhone: Fix Apr 24, 2024 pm 04:50 PM

Even answering calls in Do Not Disturb mode can be a very annoying experience. As the name suggests, Do Not Disturb mode turns off all incoming call notifications and alerts from emails, messages, etc. You can follow these solution sets to fix it. Fix 1 – Enable Focus Mode Enable focus mode on your phone. Step 1 – Swipe down from the top to access Control Center. Step 2 – Next, enable “Focus Mode” on your phone. Focus Mode enables Do Not Disturb mode on your phone. It won't cause any incoming call alerts to appear on your phone. Fix 2 – Change Focus Mode Settings If there are some issues in the focus mode settings, you should fix them. Step 1 – Open your iPhone settings window. Step 2 – Next, turn on the Focus mode settings

iPhone 15 Pro: How to get rid of the silent mode symbol in the status bar iPhone 15 Pro: How to get rid of the silent mode symbol in the status bar Sep 24, 2023 pm 10:01 PM

On iPhone 15 Pro and iPhone 15 Pro Max models, Apple introduced a physically programmable action button that replaces the traditional ring/silent switch above the volume buttons. The action button can be programmed to perform several different functions, but the ability to switch between silent and ring modes isn't gone. By default, a long press on the action button will silence the device and the button's tactile feedback will pulse three times. Both iPhone 15 Pro models will display a crossed-out bell symbol next to the time in the status bar to indicate that silent/silent mode is activated, and it will remain so until you long-press the Action button again to unmute the device. If you prefer to put your iPhone in silent mode

How to enable 'Notepad++ Dark Mode' and 'Notepad++ Dark Theme'? How to enable 'Notepad++ Dark Mode' and 'Notepad++ Dark Theme'? Oct 27, 2023 pm 11:17 PM

Notepad++ dark mode v8.0 has no parameters, Notepad++ is the most useful text editor. Every app running on Windows 10 supports dark mode. You can name web browsers such as Chrome, Firefox, and Microsoft Edge. If you work on Notepad++, the default white background may hurt your eyes. Developers have added dark mode to version 8 of Notepad++, here's how to turn it on. Enable Notepad for Windows 11/10 ++ Dark Mode Launch Notepad ++ Click "Settings" > "Preferences" > "Dark Mode" Select "Enable Dark Mode" to restart Notepad

Angular components and their display properties: understanding non-block default values Angular components and their display properties: understanding non-block default values Mar 15, 2024 pm 04:51 PM

The default display behavior for components in the Angular framework is not for block-level elements. This design choice promotes encapsulation of component styles and encourages developers to consciously define how each component is displayed. By explicitly setting the CSS property display, the display of Angular components can be fully controlled to achieve the desired layout and responsiveness.

Guide to using standby mode in iOS 17 Guide to using standby mode in iOS 17 Aug 22, 2023 pm 04:01 PM

Standby mode is coming to iPhone with iOS17, and this guide aims to show you how to use this feature on your iPhone. Standby Mode is a breakthrough feature that transforms iPhone into a dynamic, always-on smart display. When your iPhone is laid horizontally on its side during charging, it activates standby mode. This mode beautifully showcases a host of useful widgets, including but not limited to the current time, local weather updates, a slideshow of your favorite photos, and even music playback controls. A significant advantage of this mode is its ability to display notifications, allowing users to view and engage with them without having to fully wake up their iPhone. How to Use Standby Mode For Standby Mode to work properly, your iPhone must be running i

See all articles