angular 4 host listener on resize parent

So instead, we can use the special shadow-dom :host selector:

You could freely target app-image-row in the parent’s stylesheet, but here we want the component to style its own host.

So, if you wanted to make your image row a 100% width flex row, this wouldn’t work in :

But because they’re based on the Shadow DOM, one of their quirks is they can’t target the host by element name. Instead, Angular gives you a few special tools to do what you need – but the documentation isn’t great just yet.Īngular’s isolated stylesheets are great for avoiding collisions in your CSS class names. Since it wraps whatever you put in your template, you can’t interact with it at the template level. So app-image-row is the host for ImageRowComponent. Since Angular usually either uses or emulates Shadow DOM (depending on your configuration), the framework uses the same term. “Host” is a term from the Web Components world, and refers to the custom component that wraps elements in its Shadow DOM. So, what’s an Angular developer to do? Enter “Host” In any case, Angular 1.3 deprecated it, and the option is long gone in Angular 4. That was pretty convenient, but also made it less clear what was going on in the final generated DOM. That meant that if you wanted your directive to just render an image with some calculated classes and event handlers, or set width: 100% on an outer div, you could do it. Replace: true removed that wrapping element, exposing the template directly. In Angular, every component has a wrapping element – app-image-row for our ImageRowComponent for instance – that in the final markup goes around whatever is in your template.

Back in the AngularJS 1.2 days, you might have used a directive with replace: true for both of these features. If you want to see what we’re building in action, or just skip right to the code, you can check out the Plunker here. Let’s call these FancyImageDirective and ImageRowComponent. You also want a component that will take up 100% of its parent container’s width and display an array of images in a flex row. You want to add a directive you can apply to any image tag to make it look fancy when you mouse over it.

Let’s say that you’re working on an Angular 4 app that displays some images.

Angular 4 host listener on resize parent