That’s simple, tell Angular DO NOT perform repeatly change detection on my component! Instead, my component will notify Angular when it needs change detection. Well, how we are going to solve this issue? Ops, here comes ExpressionChangedAfterItHasBeenCheckedError. However when the team list is displayed and it’s larger than its container, that makes isTextOverflow() will return true this time. Then it updates DOM with all changes, including displaying the team list inside ng-container, and traverses every node again to see if it becomes stable. When the component is initializing, the first time change detection is checking isTextOverflow(), and it will return false. You probably can see it’s isTextOverflow(). Now we know what ExpressionChangedAfterItHasBeenCheckedError is, then who is the cause to introduce the improper change? It’s the developer’s responsibility to prevent introducing changes right after the change detection has been proceeded on this element. Thus it thows this ExpressionChangedAfterItHasBeenCheckedError. Angular doesn’t want to do the examination over and over, going into a Digest Hell, which will lock down the browser’s resources. However traversing every node and updating DOM could take some time and there is a chance the examined nodes in this digest cycle introduce new changes again. If it has changes, these changes suppose to be updated to DOM. To do so, the data attribute must be declared.Īlso, I’m going to set one of the option tags with a long value, to make sure it overlaps the select tag.ExpressionChangedAfterItHasBeenCheckedErrorĮxpressionChangedAfterItHasBeenCheckedError is a classical error when your component tries to ‘change’/’update’ too often.īefore going into deep to look the cause of this error, we shall refresh the memory about Angular’s digest cycle and change detection.ĭigest Cycle is a process to examine every node if it has changes (different than the previous examination), if there is no changes at all, that means the nodes are stable, it doesn’t need to update anything to DOM, so it just completes a digest cycle. This element will wrap the select element and display the current value that the select element has. Markupįirst things first, to display the ellipsized text we’re going to need a container element. When a string of text overflows the boundaries of a container, it can make a mess of your whole layout. The main idea is to get the value of the select tag and store it in the data attribute of the container element. Here’s a cool trick to handle text overflow by trunca. So we have a unique form element that is hard to style and the question is - how does one apply the text-overflow property to a select tag and handle text overflow? The answer is with a little bit of HTML and a sprinkle of JavaScript. NOTE: text-overflow property applies to block container elements It can be clipped, display an ellipsis ('…'), or display a custom string. The text-overflow CSS property sets how hidden overflow content is signaled to users. The select element is notoriously difficult to style productively with CSS.Īlso MDN on the text-overflow property itself: The select element represents a control for selecting amongst a set of options. Definitionsīefore we move on it’s important to establish the starting ground in order to understand the issue and a solution to it.Īs for the select tag, the HTML specs says: I’m going to show how to apply that to a select tag. For a better UI and appeal a CSS text-overflow property is used on a long piece of text.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |