install angular cli globally
uninstall angular cli globally
npm install -g @angular/cli
npm uninstall -g @angular/cli
npm cache clean –force
Apply class “host-inactive” on the HTMLElement hosting the component/directive and onClick, set the class to “host-active”.
Inside decorator:-
host: {
‘[class]’: ‘classState()’,
‘(click)’: ‘toggleInactive($event)’
}
Inside class:-
protected classState = signal(“host-inactive”);
toggleInactive(event: Event) {
if (this.classState() === “host-inactive”)
this.classState.set(“host-active”);
}
What does min-height: 100vh mean?
Why should you apply this style to the root component of your application?
100vh means “Make sure the root component is layed out at least as tall as the screen, irrespective of the height of the parent element”.
https://copilot.microsoft.com/shares/VPcezYmajCoCKKmZFProJ
difference between min-height: 100vh; and min-height: 100%;
min-height: 100vh; means minimum height is 100% of the viewport height.
min-height: 100%; means minimum height is 100% of the parent element’s height.
If you use min-height: 100% without setting height on the parent, your layout might collapse to fit the content.
Lazy load the children routes of ‘auth’ feature:
‘auth/login’
‘auth/signup’
so that, auth bundle is not loaded into DOM unless user visits ‘/auth’ route
and
signup bundle is not loaded into DOM if user visits ‘/auth/login’ route.
Inside auth.routes.ts:
export const AUTH_ROUTES: Routes = [
{
path: ‘login’,
loadComponent: () => import(‘./components/login/login’).then(m => m.CtLoginComponent),
title: ‘CoTask | Sign In’
},
];
Inside app.routes.ts:
export const routes: Routes = [
{
path: ‘auth’,
// Lazy load the feature routes
loadChildren: () => import(‘./features/auth/auth.routes’).then(m => m.AUTH_ROUTES),
},
];
BEM style class names of
1. login component
2. button inside login component
3. disabled button inside login component
- login
- login__btn
- login__btn–disabled
Does order of routes matter in Routes array?
If yes, what should be order of
* auth
* /
* ** (wildcard)
Yes, Angular router processes routes sequentially, from top to bottom, and uses the first path match it finds.
1. auth
2. /
3. **
In my mind questions for HLD
- What kind of styles should we apply globally?
- Where should we keep styles files that we intend to apply globally?
- How to use feature flags in angular?
- How and where to load some essential scripts before initializing the app?
- What kind of business logic forms the part of such pre-initializing script?
- How to implement global error handling to hide stack trace from end user?
- How to implement pagination on UI using api from backend?
- How to implement infinite scroll?
- How to implement multi-page form submission?
- When and how to use Form Arrays (instead of FormGroups)
- How to implement reusable modal dialog, using content projection ?
- How to use indexedDB to avoid hitting api calls on page refresh?
- How and when to prefetch data for a route?
- How to implement FAQs using accordions?
- How to implement typeahead or search suggestions in searchbox?
- What’s AOT compilation in Angular?
- What’s Artifactory/JFrog, how is it used in Angular?
- How to build SSR app in Angular?
- Difference between builder and bundler, how each is used in Angular?
- How and when to use interceptors in Angular?
- How to implement authentication in Angular?
- Which pipe did you implement in Angular?
- Which directive did you implement in Angular?
- How do you manage environment.ts for dev/prod separation in Angular?
What will be output?
const user = { name: “Sahil” };
user.name = “Copilot”;
console.log(user.name);
“Copilot”
If const is used with an object or array, the reference is fixed, but the contents can still be mutated.
What will be output?
class User {
readonly id: number;
constructor(id: number) {
this.id = id;
}
}
const u = new User(1);
u.id = 2;
console.log(u.id);
Error.
Cannot mutate a readonly property of the class.
const for immutable variables and references (box).
readonly for immutable properties of classes (contents of the box)
When to use protected and when to use private?
- private for injected services, not accessible to subclasses.
- protected for FormGroup, accessible to subclasses.
- public (by default) for accessible from template and from outside of class.
Angular templates as privileged subclasses of your component. They can call protected methods in event bindings (like a child calling a parent’s protected method), but they can’t read or bind to protected properties directly
fb.nonNullable.group()
versus
fb.group()
- Creates a FormGroup where all controls are non-nullable
(inferred as FormControl<string>)</string> - Creates a FormGroup where all controls are nullable
(inferred as FormControl<string | null>)
Using nonNullable eliminates the need for null checks in your code.
Manually trigger update to ensure all validations run on a form, especially the cross-field ones.
this.signupForm.markAllAsTouched();
Get value of email control from the formgroup defined by
fg =this.fb.nonNullable.group({
email: [’’],
password: [’’],
});
this.fg.controls.email.value
print errors of password form control.
console.log(this.loginFormGroup.controls.password.errors);
Difference between<a href="/auth/signup"></a>
and<a [routerLink]="['/auth/signup']"></a>
- href would cause a full page reload Angular would lose control.
* The browser sends a new HTTP request to the server.
* The entire Angular app is rebooted from scratch.
* All in-memory state (form data, services, route guards, etc.) is lost. - routerLink avoids full page reload and instead. Angular’s Router intercepts the click and:
* Updates the URL without reloading the page.
* Loads the new component in-place.
* Keeps services, state, and context alive.
* Triggers route guards, resolvers, and animations as expected.
difference between
1. justify-content: center;
and
2. align-items: center;
- Aligns items horizontally (by default)
- Aligns items vertically (by default)
