As I’m writing this I’m listening to a Vaporwave Synthwave mix (I have a weird musical taste ranging from classical music to Japanese city-pop, but that is not important for this article). One thing that I noticed is that lists are everywhere! Comments on the… Read More »Using trackBy with *ngFor
In the last article, we talked about attribute directives. In a natural continuation of the theme, we’ll now mention structural directives, too. So what are they, how do they differ from attribute directives, and what are we using them for? Structural directives In short, structural… Read More »Using structural directives in Angular
Directives are functions that enhance the current or add additional behavior to the HTML elements they are bound to. We could divide directives into: Attribute directives Structural directives Components If finding components in this list feels weird do you, keep in mind that components are… Read More »Using attribute directives in Angular
ngOnChanges is a lifecycle hook that is being invoked every time a variable decorated by @Input changes. We are intercepting and handling changes inside a ngOnChanges(changes: SimpleChanges) method. We are using the SimpleChanges API, an interface that represents all the changes stored by a particular… Read More »Using ngOnChanges
What kind of components are dynamic components? Well, the ‘dynamic’ in dynamic components refers to the fact that we actually don’t define them at the build-time (but create them during runtime), and that they are not referenced in the templates. Even though they do not… Read More »Dynamic components in Angular
In past articles, we used the nativeElement to directly query and modify the DOM. Querying native elements by bypassing any abstraction may come with a couple of problems though. For example, by using native element methods, we can’t execute modifications in non-DOM environments such as… Read More »Angular Renderer
Following in the footsteps from @ContentChild and @ContentChildren, we need to utilize the power of a live list in order to configure multiple live queries for @ViewChild. And we have just the right decorator. It is called @ViewChildren. @ViewChildren We use @ViewChildren to configure a… Read More »Angular ViewChildren
We are not stopping with the decorators here. The next one we’ll tackle is the @ViewChild. Additionally, you can get a refresher on @ContentChild and @ContentChildren. We’ve seen how @ContentChild and @ContentChildren work. Components are queried based on what we pass inside the component tags.… Read More »Angular ViewChild
After we mentioned ContentChild in the last post, we will move our focus onto ContentChildren, whose only difference is that instead of selecting only one element – it selects a QueryList of elements from the DOM. (Wait, what is a QueryList? QueryList is an unmodifiable… Read More »Angular ContentChildren
ContentChild is a property decorator in Angular that configures a content query or retrieves a reference to a projected content. We can use ContentChild in order to retrieve the first element (template reference, component, or directive) matching the selector from the DOM. We can define… Read More »Angular ContentChild