Directive in Angular
Angulat directives are powerful tools that extend HTML’s capabilities by allowing you to create custom, reusable elements and attributes. Types of Angular Directives Angular provide...
My Learnings
Explore my blog posts documenting the insights and solutions I've gained from overcoming challenges over the past three years. Dive into a range of topics and lessons that showcase my continuous growth and expertise.
Explore by topic
GCP Cloud Associate Course Assets and Documents
Cheat Sheet: Slides Latest Demo Screens https://www.in28minutes.com/gcp-bookshelf Questions:
ViewChild, ContentChild and ContentChildren in Angular
1. ViewChild: 2. ContentChild: 3. ContentChildren: Example: Key differences: Common use cases:
Template variables in Angular
Template variables in angular are a powerfull feature that allow developers to ference DOM elements, coomponents or directive direactly with the template. What are Template...
ngOnDestroy and DestroyRef in Angular
both ngOnDestroy and DestroyRef serve the purpose of executing cleanup logic before an Angular component or destroyed, but they do so in different ways. Key...
Angular Component Lifecycle
Official Docs: https://angular.dev/guide/components/lifecycle#lifecycle-interfaces Execution order
ngOnInit in Angular
ngOnitit is crucial lifecycle hook that allows you to perform initialization tasks in your components. With OnInit interface enhances type safety and clarity in your...
Dynamic Styling in Angular
Two key methods for dynamic styling in Angular: the ngClass directive and inline styles using the style attribute. Using ngClass Directive 1. Basic Object Syntax: You can bind an object to...
HostBinding and HostListener in Angular
What is @HostBinding? The @HostBinding decorator is used to bind a property of the host element to a property in the directive or component class. This means...
Component selectors in Angular
When building component you notice unwanted element render in HTML like this Image: That not a problem nor it will break you app but having...
Passing arguments to components in Angular
So I want to pass argument to component and get dynamic dashboard item wrapper. Before: Child component: In child component we can see the header...
Debugging Angular App
1. Check error message and try to understand error message. For example here we have error message related TS where we have to add string...
Project: Investment Calculator
Project file structure look like this blow. Output:
WP Tutorials
When I started learning I found this man’s course on WordPress and I been very grateful for that course and this man. By the way...
Angular: Services
Services are a key part of building a scalable and maintainable Angular application. Services are used to organize and share code across your application. They...
Angular: Template Driven Forms in Angular (ngModel).
Angular provides robust form handling techniques, and one of the easiest ways to handle forms is through Template Driven Forms. Below example one of the...
Angular: ngContent
If you want build a card design and use that card design as wrapper in multiple places you can use it with ngContent method. Example:...
Angular: Structural directives (if, for and switch)
In angular template we can manage conditional rendering by using Structural directives. Let’s see how can we do that with code. Using *ngIf and *ngFor...
Angular: @Output: Passing data from child to parent components.
In angular, @Output is used in a child component to emit events to parent component. This allows communication from the child to the parent component...
Angular: @Input() vs input()
@Input() Decorator The @Input decorator allows parent components to pass data to their children. Example of @Input In this example child component binds userName with...