Hostlistener

Angular is a popular front-end development framework that allows developers to create web applications with ease. It is packed with various features and functionalities that simplify web development tasks. Two of these features, HostListener and HostBinding, enable developers to interact with the DOM and handle events in their Angular applications. …

Decorators are design patterns or functions that define how Angular features work. By using the decorators we can attach metadata to a class declaration, method, property, or parameter. Decorators are invoked with a prefixed @ symbol, and immediately followed by a class, parameter, method or property. Angular supports four types…

Link for Lesson 09: Directives @HostListener https://medium.com/@yuvayuvaraj720444/lesson-9-directive-hostlistener-810406b9a64c Here is the full project demo https://stackblitz.com/edit/angular-directives-hostbinding we can do lot more things using directives, one thing is about styling. advance.directive.ts In advance.directive.ts, i am doing a small task. where intially the color of element will be yellow. …

Change the appearance or behavior of DOM elements and Angular components with attribute directives. Here we learn how to create custom directives. we can create custom directive for input field validation. and the benefit of custom directive is once we create and use this directive inside any component or modules…

I have always found switchMap as one of the most useful flattening operator that RXJS offers in scenarios like a search or a filter operation, where the user keeps changing the data to be searched very quickly. In each of these scenarios, a keyup event or a change event by…

I have always found @HostBinding and Renderer2 as 2 good ways to manipulate the DOM in Angular without directly accessing it. But @HostBinding, in some cases does a better job by keeping the code clean and making it more readable. @HostBinding can manipulate the properties,attributes and classes of a DOM…

HostBinding and HostListner are the concepts of the directive and as we know, we use directive when we want to specify some behavior to the DOM. Lets’s understand HostBinding and HostListner using an example. To Do: In this demonstration, we will create a Custom Directive named highlight. We will use…

ag-grid As many of the web development community know by now, ag-grid is a very powerful data grid that can display hundreds of thousands of records efficiently. More details on ag-grid here… ag-grid has a lot of good stuffs in it and once your project adapts to using ag-grid as…

Keyboard accessibility holds a great significance for websites and web applications for web accessibility. A common bottleneck for front-end developers, sometimes, is the optimized implementation of keyboard accessibility. Many users with motor disabilities rely on a keyboard. Blind users also typically use a keyboard for navigation. …