![Brian Treese](/img/default-banner.jpg)
- 67
- 131 847
Brian Treese
United States
เข้าร่วมเมื่อ 13 ต.ค. 2011
Hello my name is Brian Treese and I'm the Chief of UX at SoCreate, a company building a fun and easy way to turn great ideas into movie & TV show scripts. I build things for the web daily and make videos about the stuff I use, discover, or encounter. On this channel, you'll mostly find front-end web development topics about things like HTML, CSS, SCSS, JavaScript, Angular, Accessibility, and more.
Need to toggle some content in Angular? Here's how you do it
🔥NEW!!!🔥Swoop up some hip new Angular drip - www.teepublic.com/user/dev-drip
------------------------------------------------------------------------------
Hello and welcome to another Angular tutorial. In this video I’m going to cover how to create something that I need often, a toggle button. This type of button controls the visibility of some sort of associated content. We’ll look two main approaches, one where we use a class and some CSS to control the visibility, and another where we use conditional logic to insert content into or remove it from the DOM. We’ll also look at a couple of bonus variations with the class-based, CSS approach too.
------------------------------------------------------------------------------
💖 Help Support the Channel:
If you found this helpful and want to show some love, you can always buy me a coffee (buymeacoffee.com/briantreese)!
------------------------------------------------------------------------------
🔗 Demo Links:
- Before (stackblitz.com/edit/stackblitz-starters-rc8hmk?file=src%2Fexample%2Fexample.component.html)
- Class-Based CSS Method (stackblitz.com/edit/stackblitz-starters-akbcmj?file=src%2Fexample%2Fexample.component.html)
- CSS Single-Line Truncated Text Method (stackblitz.com/edit/stackblitz-starters-vsjxrt?file=src%2Fexample%2Fexample.component.scss)
- CSS Multi-Line Truncated Text Method (stackblitz.com/edit/stackblitz-starters-kx8fve?file=src%2Fexample%2Fexample.component.scss)
- Conditional Content Method (stackblitz.com/edit/stackblitz-starters-bz6h2x?file=src%2Fexample%2Fexample.component.html)
------------------------------------------------------------------------------
📚 Additional Resources:
- The Angular Control Flow Syntax (th-cam.com/video/nUEERAOZKwg/w-d-xo.html)
- Useful CSS mask-image demos (th-cam.com/video/xz9jkLceRGQ/w-d-xo.html)
------------------------------------------------------------------------------
📖 Chapters:
0:00 - Introduction
0:38 - The Demo Application
1:28 - Creating a Class-Based, CSS Toggle Button
3:44 - Using the Class-Based, CSS Toggle Button to Show/Hide Text Truncated to a Single Line
5:23 - Using the Class-Based, CSS Toggle Button to Show/Hide Text Truncated to Multiple Lines
6:29 - Creating a Toggle Button for Conditional Content
7:33 - Conclusion
------------------------------------------------------------------------------
#angular #angular_developer #angulartraining #angularcourse #angulardevelopment #angular_components #angular_directives #angulartutorial #angulartutorialforbeginners #css
------------------------------------------------------------------------------
Hello and welcome to another Angular tutorial. In this video I’m going to cover how to create something that I need often, a toggle button. This type of button controls the visibility of some sort of associated content. We’ll look two main approaches, one where we use a class and some CSS to control the visibility, and another where we use conditional logic to insert content into or remove it from the DOM. We’ll also look at a couple of bonus variations with the class-based, CSS approach too.
------------------------------------------------------------------------------
💖 Help Support the Channel:
If you found this helpful and want to show some love, you can always buy me a coffee (buymeacoffee.com/briantreese)!
------------------------------------------------------------------------------
🔗 Demo Links:
- Before (stackblitz.com/edit/stackblitz-starters-rc8hmk?file=src%2Fexample%2Fexample.component.html)
- Class-Based CSS Method (stackblitz.com/edit/stackblitz-starters-akbcmj?file=src%2Fexample%2Fexample.component.html)
- CSS Single-Line Truncated Text Method (stackblitz.com/edit/stackblitz-starters-vsjxrt?file=src%2Fexample%2Fexample.component.scss)
- CSS Multi-Line Truncated Text Method (stackblitz.com/edit/stackblitz-starters-kx8fve?file=src%2Fexample%2Fexample.component.scss)
- Conditional Content Method (stackblitz.com/edit/stackblitz-starters-bz6h2x?file=src%2Fexample%2Fexample.component.html)
------------------------------------------------------------------------------
📚 Additional Resources:
- The Angular Control Flow Syntax (th-cam.com/video/nUEERAOZKwg/w-d-xo.html)
- Useful CSS mask-image demos (th-cam.com/video/xz9jkLceRGQ/w-d-xo.html)
------------------------------------------------------------------------------
📖 Chapters:
0:00 - Introduction
0:38 - The Demo Application
1:28 - Creating a Class-Based, CSS Toggle Button
3:44 - Using the Class-Based, CSS Toggle Button to Show/Hide Text Truncated to a Single Line
5:23 - Using the Class-Based, CSS Toggle Button to Show/Hide Text Truncated to Multiple Lines
6:29 - Creating a Toggle Button for Conditional Content
7:33 - Conclusion
------------------------------------------------------------------------------
#angular #angular_developer #angulartraining #angularcourse #angulardevelopment #angular_components #angular_directives #angulartutorial #angulartutorialforbeginners #css
มุมมอง: 360
วีดีโอ
This is a classic... you know you need it, if you don't already have one
มุมมอง 242วันที่ผ่านมา
🔥NEW!!!🔥Swoop up some hip new Angular drip - www.teepublic.com/user/dev-drip There are a handful of animations that are commonly found in various applications that you probably use every day. I’ll bet you don’t even notice them or give them much thought. The app just feels easier to use and more intuitive with them. In this video I’ll show you how to use one that I need often, a crossfade anima...
You're going to want one of these in your app!
มุมมอง 76914 วันที่ผ่านมา
🔥NEW!!!🔥Swoop up some hip new Angular drip - www.teepublic.com/user/dev-drip There are certain animations that are commonly found in a lot of different applications. They are common because people are used to the way they feel, and they are good at conveying interactions and the meaning behind them. One of these types of animations is a flip animation where you have some content and then, throu...
9.) CSS Shapes: The Ultimate Guide - The padding-box value
มุมมอง 5814 วันที่ผ่านมา
In this video, we’ll explore using the padding-box value with the shape-outside function. This value defines the shape’s position based on the outer edges of the container’s padding. We'll break down how adjusting padding affects the size and flow of content around shapes. We'll also look at how margin, borders, and box-sizing can affect how shapes are sized when using the padding-box value too...
7.) CSS Shapes: The Ultimate Guide - The margin-box value
มุมมอง 3014 วันที่ผ่านมา
In this video, we’ll explore using the margin-box value with the shape-outside function. This value defines the shape’s position based on the outer edges of the container’s margin. We'll break down how adjusting padding affects the size and flow of content around shapes. Help Support the Channel: If you found this helpful and want to show some love, you can always buy me a coffee (buymeacoffee...
8.) CSS Shapes: The Ultimate Guide - The border-box value
มุมมอง 3914 วันที่ผ่านมา
In this video, we’ll explore using the border-box value with the shape-outside function. This value defines the shape’s position based on the outer edges of the container’s borders. We'll break down how adjusting borders affects the size and flow of content around shapes. We'll also look at how box-sizing can affect how shapes are sized too. Help Support the Channel: If you found this helpful ...
6.) CSS Shapes: The Ultimate Guide - The clip-path property
มุมมอง 5221 วันที่ผ่านมา
In this video, we’ll explore how to visualize CSS Shapes using the clip-path property. By combining clip-path with CSS Shapes, you can clip your elements allowing content to flow around the irregular edges. The clip-path property, part of the CSS Masking Module, works hand in hand with CSS Shapes, using the same shape functions like circle, ellipse, inset, and polygon. Help Support the Channel...
5.) CSS Shapes: The Ultimate Guide - The shape-outside Property
มุมมอง 5221 วันที่ผ่านมา
CSS Shapes allow you to wrap inline content around floated shapes, creating dynamic and visually engaging layouts. In this video, we’ll explore how the shape-outside property works to create invisible shapes that guide the flow of your content, without altering the element’s bounding box. Help Support the Channel: If you found this helpful and want to show some love, you can always buy me a co...
4.) CSS Shapes: The Ultimate Guide - The Reference Box
มุมมอง 8621 วันที่ผ่านมา
CSS Shapes can transform your web layouts, but to make them work as desired, there are a few key concepts you need to master. In this video, we’ll break down the essentials, starting with the reference box-the virtual box that controls how shapes are drawn and positioned. Help Support the Channel: If you found this helpful and want to show some love, you can always buy me a coffee (buymeacoffe...
3.) CSS Shapes: The Ultimate Guide - Fundamentals
มุมมอง 7021 วันที่ผ่านมา
Ever wondered why content doesn’t wrap around floated shapes like circles or images with transparent regions the way you expected? It used to be a real challenge on the web, but not anymore-thanks to CSS Shapes! In this video, we’ll dive into the core concepts and rules you need to know to start using CSS Shapes effectively. Learn how shapes work, explore basic rules and concepts, along with di...
2.) CSS Shapes: The Ultimate Guide - What are CSS Shapes?
มุมมอง 11321 วันที่ผ่านมา
Ever wondered what CSS Shapes are and how they can be used to enhance your web designs? Let’s break it down by first understanding what they’re not. The web is often seen as a set of stacked rectangles, but with CSS Shapes, you can break that mold. Help Support the Channel: If you found this helpful and want to show some love, you can always buy me a coffee (buymeacoffee.com/briantreese)! #css...
1.) CSS Shapes: The Ultimate Guide - Introduction
มุมมอง 11921 วันที่ผ่านมา
Are you tired of being confined by the rectangular limitations of the web? What if I told you that you could bring the freedom and creativity of print design to the web? In this course, I'm going to show you how to escape the boxy world of web layouts and infuse your designs with the dynamic, anything-goes nature of editorial print design! By the end of this course, you'll be thinking about web...
Want to know how to create a slide-in/slide-out animation?
มุมมอง 47821 วันที่ผ่านมา
🔥NEW!!!🔥Swoop up some hip new Angular drip - www.teepublic.com/user/dev-drip When you build things in Angular, you’ll probably end up wanting or needing to add animations and transitions to parts of your UI. One very common one is a “slide-in” or “slide-out” animation where an item transitions from a hidden to a visible state. And since this is something that you’re likely going to need at some...
Angular signals... feeling the effects with the effect function
มุมมอง 408หลายเดือนก่อน
🔥NEW!!!🔥Swoop up some hip new Angular drip - www.teepublic.com/user/dev-drip Signals are a pretty big deal in Angular now-a-days. I’ve created several videos on them recently because there’s a lot to consider when using them. As you use them more over time, you’ll probably run into scenarios where you need to execute code when signal values change. Now, one way to do this is to use computed sig...
Can you create a signal from another signal?
มุมมอง 315หลายเดือนก่อน
🔥NEW!!!🔥Swoop up some hip new Angular drip - www.teepublic.com/user/dev-drip Signals are now a core concept in the Angular framework. When you build components, directives, and services, you’re going to want use them going forward. And as you do, at some point you’ll likely ask yourself the question: how can I create a signal based on the values from another signal? Well, in this video, I’m goi...
3 ways to add dynamic CSS custom properties in Angular components
มุมมอง 705หลายเดือนก่อน
3 ways to add dynamic CSS custom properties in Angular components
Component template variables in Angular using the new @let syntax
มุมมอง 654หลายเดือนก่อน
Component template variables in Angular using the new @let syntax
Create a custom loading screen in your Angular app
มุมมอง 970หลายเดือนก่อน
Create a custom loading screen in your Angular app
Host decorators are dead... replace them with host element binding today!
มุมมอง 9412 หลายเดือนก่อน
Host decorators are dead... replace them with host element binding today!
Angular CDK: Automatically resizing textareas!
มุมมอง 3972 หลายเดือนก่อน
Angular CDK: Automatically resizing textareas!
Angular Animations: Router transitions
มุมมอง 1.4K2 หลายเดือนก่อน
Angular Animations: Router transitions
Using router link accessibility features
มุมมอง 1893 หลายเดือนก่อน
Using router link accessibility features
Angular Animations: Easily disable and enable animations
มุมมอง 4593 หลายเดือนก่อน
Angular Animations: Easily disable and enable animations
Angular Animations: Creating reusable animations!
มุมมอง 5264 หลายเดือนก่อน
Angular Animations: Creating reusable animations!
Angular Animations: Adding flexibility with params!
มุมมอง 5434 หลายเดือนก่อน
Angular Animations: Adding flexibility with params!
Adding native fallback content for slots in Angular components
มุมมอง 3034 หลายเดือนก่อน
Adding native fallback content for slots in Angular components
Angular signal queries with the viewChild() and contentChild() functions
มุมมอง 1.1K4 หลายเดือนก่อน
Angular signal queries with the viewChild() and contentChild() functions
Excellent video!!!! thank you
Thanks. That was a clear explanation of the basics that I needed to hear. I've been turned off angular animations in the past because the animations array has always been incomprehensible.
Very smart and clean !
Amazing
Gracias por tomarte tu tiempo de hacer este video y explicar de la mejor manera!
nice
Great tutorial! This is exactly what I needed and showing the pros/cons and two different use cases was very helpful
Glad it was helpful!
Nice video. Thanks for sharing. What should I do if, when I click a button, an overlay appears. Then, when I click another button, the previous overlay closes, and the new overlay opens?
Good question. Just to clarify, you want to have two overlay's open at the same time?
@@briantreese No, I just want one overlay open at a time.
I just tried your CDK Overlay Basics example in stackblitz. However, I noticed that after clicking the button to open the overlay, when I click the same button again, I cannot close the overlay. I have to click elsewhere to close it. I'd like to ask what the reason for this is.
Ah I see, what was happening in that example was that the button click would actually trigger it to close and then immediately reopen. I've updated that example to include stopPropagation() on the overlayOutsideClick event which is what causes the overlay to close. This now allows you to click anywhere outside, including on the button without propagating that event to the button itself. Hope that helps.
Thank you so much. Appreciate it!
Thanks for really helpful tutorials on animations. Angular docs on animations are pretty much garbage (at least when I'm trying to actually learn them) and your tutorials with minimal code makes it really easy to understand! (btw allPlayers variable isn't actually allPlayers but all beside first one so more like allPlayersBesideFirstOne, but hey maybe that's me - obviously for purposes of this tutorial that doesn't really matter)
Thanks for the feedback! I really love hearing when people find it useful!
These thumbnails though 😂 Keep up the great videos!
Love it
Great thumbnail lol
Just discovered your channel - this is really amazing. Thank you for providing more advanced use cases and features. Very cool stuff
Thanks for the feedback! I always love hearing from those who find it useful!
Great video. Has this changed with the introduction of the input() and output() functions?
Thanks! No, it still works, even with the new signal inputs: stackblitz.com/edit/stackblitz-starters-xcggba?file=src%2Fplayer%2Fplayer.component.ts
@@briantreese yeah thanks, works. If only they supported outputs, dammit.. uff
Thanks!
I came across this TH-cam channel through your Angular tutorials. Your videos are clearly structured, well edited and you have a pleasant voice. I am now looking forward to the CSS tutorial. Keep up the great work.
Thanks for the feedback! I appreciate the kind words and am glad you find this useful.
thanks 👍 maybe animation on a scroll event in the viewbox it's the next new feature of your lib?
Great video, thanks!
Thanks. You could also implement the host option in a Directive. Make it reusable.
Awesome. I have been working with angular since angular 7 and it was always inexplicable to me why they don't add 'template let' as a part of framework because double subscriptions in template were always a problem)
Thank you for your video, solving this problem with 'host' looks really elegant in this particular case. But personally, I think that the usage of 'effect' instead of OnInit life cycle method decrease readability of the code)
Why would i use it when i can use host property on Component decorator?
Yeah, this isn’t really needed anymore
nice explaining, thanks 👍
Very nicely explained and narrated 👌🏻
Hi, I tried implementing the route transition as you have in my project. However, my transition behaviour appears to be different. For me, the exit animation for the outgoing route component and the entry animation for the incoming route component occur simultaneously, which causes my render to bug out as during the point of transition, both outgoing and incoming routes are rendered. For example, if the enter and leave animation has an animation time of 1s, my transition time for navigating is 1s where as in your demo, the transition time is 2s (one component leaves then the other component enters). Is there a solution for this? or am I overlooking something else?
Hello, I'm sure there is a solution but it's difficult to help without seeing some code. Could you put together simple Stackblitz example reproducing the issue so that I can troubleshoot? Thanks!
@@briantreese Hi sorry, I missed out on this reply. I am unable to recreate it on stackblitz but in the end, I just decided not to do route transitions. Thanks for replying though!
Style binding did the trick for me. Super simple! Thanks for the video tutorial.
❤
Why should I even bother checking the Angular docs when I can just watch your videos? 😁😎 Thanks 🙏🏼 Btw, I really love those AI generated pet pictures 😂
Thanks for the feedback, glad these are helpful!
thanks for this awesome explain 💯
Really great examples. What I like most is the simplification of async logic with let. In the past I often had the problem of wrapping whole parts of the template inside an if-statement or even (worse) using multiple async pipes on the same observable. Just putting a let on top of the template is a game changer. Thanks for the idea!
Great we moved everything from host to hostbinding decorator and now we should move it back again? Thats how we can keep stay busy right?
Love this! So glad I found you channel, you do a very good job at explaining the process and the different options.
Thank you!
Great explanation! After watching this, I immediately changed all my event emitters to the new output function. Thanks Brian!
Good video. Tip for people using angular-eslint: if you are getting a warning about using `host`, update your version as the recommendation has been updated relatively recently to align with this new best practice.
Hey there, great video, I'm trying to bind the scrollStrategy to my ng-template for each item inside a list that is rendered with ngFor, just like your example, it's just not separated between components. I'm having this problem where, every time I try to open the second overlay,angular throws an error "Scroll strategy has already been attached", and I'm not really following on what's happening
I'd love to try and help. Can you reproduce this in a simple StackBlitz example so I can look at your code? It's pretty hard to try to help when I don't have something to look at. Thanks!
Very cool feature, but this open doors for people do tone's of s***... I can imagine how messy some code bases may end up.
Or less messy...
awesome introduction ❤
Thanks!
That is very useful, thank you. Keep it up please. 👏🏼👏🏼
Thanks, will do!
awesome explain 😃 But one question: how to animate div, when it shows in viewport on scroll page? Is it possible via built-in Angular Animation?
Unfortunately this is not a concept that's available with Angular animations alone. You can do this type of thing with CSS although it's a newer feature so it may not be supported in all browsers (th-cam.com/video/PcyFYILv8TE/w-d-xo.html). You may need to look into using intersection observer (developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to trigger an animation that way. Hope that helps!
@@briantreese oh, thanks 👍 but, maybe, it's a good point to the next animation tutorial 😅
I hope they will improve the typing for "host". right now for instance it is possible to give any name for the click event function and it still would build.
Your content is so useful. Thank you very much! Quick question: If the AppComponent template only has the RouterOutlet directive, do we need to add a div wrapper (e.g., `<div @enter><router-outlet /></div>`) to apply the transition effect, or is there a more elegant or smarter way to achieve this?
Thanks for the feedback! No, if you only have a router outlet in your app component, you should be able to bind the animation directly on the host element. Check out this video to learn how to do that: th-cam.com/video/hfu0edMz_fk/w-d-xo.html. Hope that helps!
@@briantreese Thank you! It worked like a charm!
Hey, It's amazing content with animation and it's helping me quite a lot in building my angular app. I want to request youone thing that can you please create separate video on animating bootstrap modal dialog? Like how to animate modal dialog when it's opened and closed?
Do you still need renderer when using host binding?
I this case I do since I’m using the addClass() and removeClass() methods to toggle a class on the body element. If I were only binding the class on the host element then I wouldn’t need it. But, just to be clear, this is only for the example in this video. Binding a class on the host element does not require the renderer. Hope that helps.
@@briantreese Wow. Very clear. Thank you. I tried using it but it throws an error about not having a provider. I am using standalone components
thanks for the video, very informative and useful
As a newbie I've always asked myself wheter there is difference between @ViewChild and document.querySelector. Furthermore, what if I need to access some HTML element from parent in my child component?
There are different ways to do this, one way is to use a template reference variable and pass the element as an input to the child component like this: stackblitz.com/edit/stackblitz-starters-8ij8hp?file=src%2Fchild.component.ts. Another way is to use the viewChild() function in the parent and then inject the parent component into the child component like this: stackblitz.com/edit/stackblitz-starters-zteqa2?file=src%2Fchild.component.ts. Hope that helps!
i'm loving this tutorial series!! i have one request though, could you link to the non-animated templates you start with so it is easier to follow along? thanks!
Thank you Brian! Your videos have been of great help. Well done 💯
Thank you!
Great video! Thank you!