This article is a mirror article of machine translation, please click here to jump to the original article.

Architect_Programmer_Code Agriculture Network»Architect › Front-end design & web › Front-end frame › Angular 11 Series (XV) Acquires Component Height and Dynamically Adjusts Height ...
View: 9574|Reply: 1

[Angular] Angular 11 Series (XV) acquires component height and dynamically adjusts height

[Copy link]
Posted on 8/23/2020 6:05:22 PM | | | |
Angular 9 Series (1) Dynamically Loaded Components
https://www.itsvse.com/thread-9238-1-1.html

Angular 9 series (2) dynamic component transmission parameters
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 series (3) subscribes to dynamic component events
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 Series (IV) Custom Pipe pipelines
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Series (V) formats the amount currency format
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 series (VI) calls native JS variables and methods
https://www.itsvse.com/thread-9254-1-1.html

Angular 9 series (VII) CSS-style scope
https://www.itsvse.com/thread-9264-1-1.html

Angular 9 series (VIII) updates the value of a child component by triggering an event via set
https://www.itsvse.com/thread-9267-1-1.html

Angular 9 Series (nine) #id selector applied on the page
https://www.itsvse.com/thread-9278-1-1.html

Angular 9 series (10) embeds vconsole and eruda developer debugging panels
https://www.itsvse.com/thread-9286-1-1.html

Angular 9 Series (XI) 5 Ways to Define Styles
https://www.itsvse.com/thread-9305-1-1.html

Angular 9 series (XII) generates dynamic tokens based on OTPs
https://www.itsvse.com/thread-9325-1-1.html

Angular 10 series (thirteen) introduces Baidu echarts charts
https://www.itsvse.com/thread-9347-1-1.html

Angular 11 series (XIV) production environment for debugging
https://www.itsvse.com/thread-9348-1-1.html
First, the dynamic browser visible height and width codes are as follows:

WeThe royal blue background div changes with the height change throughout the browser, the height is one-fifth of the visible height of the browser, and the console outputs the adjusted width and height values of the current window, as shown in the figure below:



The code is as follows:

HTML code:



TS Code:

Get the height of the component

The html code for the app-test1 component is as follows:



HTML code:

TS Code:

For Angular 8 or later, you need to provide two parameters in the ViewChild


Otherwise, the error will be as follows:

ERROR TypeError: Cannot read property 'clientHeight' of undefined
We directly get the test1 component height, it will return 0, we need to wrap a layer of div from the outside to get the normal height, as shown in the figure below:



(End)




Previous:[Turn] to get the position of the cursor in the html
Next:NPOI Read Export Demo

Related Posts
 Landlord| Posted on 8/23/2020 6:06:05 PM |
Or try using:https://www.npmjs.com/package/angular-resize-event
Disclaimer:
All software, programming materials or articles published by Code Farmer Network are only for learning and research purposes; The above content shall not be used for commercial or illegal purposes, otherwise, users shall bear all consequences. The information on this site comes from the Internet, and copyright disputes have nothing to do with this site. You must completely delete the above content from your computer within 24 hours of downloading. If you like the program, please support genuine software, purchase registration, and get better genuine services. If there is any infringement, please contact us by email.
Mail To:help@itsvse.com