Once you know Angular's basics, a handful of advanced features make the biggest difference in real apps: loading components at runtime, sharing state between components, building forms from data, and handling asynchronous work with RxJS and signals. This page shows the current way to do each, because several patterns in older tutorials, such as ComponentFactoryResolver, are deprecated.
Mastering Angular covers modern Angular from the ground up: standalone components, signals, control flow, routing, forms, HTTP and hosting. The Complete MEAN Stack Handbook shows how Angular fits with Node.js, Express and MongoDB, and where a full app can run. This page adds the advanced patterns on top.
Create components at runtime with ViewContainerRef.createComponent() or NgComponentOutlet; ComponentFactoryResolver is deprecated. Share state through an injectable service that holds signals. Build dynamic forms with typed reactive forms and FormArray. Keep RxJS for streams such as HTTP and search boxes, and turn the result into a signal with toSignal().
1. Load components dynamically
Pass the component class straight to createComponent(). No factory is needed any more:
import { Component, Type, ViewContainerRef, inject } from '@angular/core';
@Component({
selector: 'app-widget-host',
template: `<button (click)="load(chart)">Show chart</button>`,
})
export class WidgetHost {
private vcr = inject(ViewContainerRef);
chart = ChartWidget; // any standalone component with a title input()
load(component: Type<unknown>) {
this.vcr.clear();
const ref = this.vcr.createComponent(component);
ref.setInput('title', 'Monthly sales'); // sets an input() on the new component
}
}For simple cases, the template directive *ngComponentOutlet="widget" does the same without code. To load the component's code only when needed, prefer a @defer block or a lazy route, covered in the Angular guide.
2. Share state between components
Beyond inputs and outputs, put shared state in a service. With signals, it needs no subscriptions:
import { Injectable, computed, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class CartStore {
private items = signal<{ id: number; price: number }[]>([]);
readonly count = computed(() => this.items().length);
readonly total = computed(() => this.items().reduce((s, i) => s + i.price, 0));
add(item: { id: number; price: number }) {
this.items.update(list => [...list, item]);
}
}Any component can inject(CartStore) and read count() or total() in its template. The older BehaviorSubject pattern still works, but signals are simpler for state that the UI displays.
3. Dynamic, typed forms
Reactive forms are typed, and FormArray lets you add fields at runtime:
import { Component, inject } from '@angular/core';
import { FormArray, FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
@Component({
selector: 'app-invite',
imports: [ReactiveFormsModule],
templateUrl: './invite.html',
})
export class Invite {
private fb = inject(FormBuilder).nonNullable;
form = this.fb.group({
team: ['', Validators.required],
emails: this.fb.array([this.fb.control('', [Validators.required, Validators.email])]),
});
get emails() { return this.form.controls.emails as FormArray; }
addEmail() { this.emails.push(this.fb.control('', [Validators.required, Validators.email])); }
}Render the array with @for over emails.controls. Validate again on the server; browser validation only helps the user.
4. RxJS and signals together
RxJS is still the right tool for streams: HTTP calls, search-as-you-type, retries. Signals are the right tool for state. Bridge them with toSignal():
import { toSignal } from '@angular/core/rxjs-interop';
import { debounceTime, distinctUntilChanged, switchMap, catchError, of } from 'rxjs';
// query: a FormControl<string>; api: a service whose search() returns an Observable
results = toSignal(
this.query.valueChanges.pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(q => this.api.search(q).pipe(catchError(() => of([])))),
),
{ initialValue: [] },
);switchMap cancels the previous request when the user keeps typing, and catchError keeps one failed call from ending the stream.
5. Running it on Domain India
A static Angular build (no server-side rendering) runs on cPanel, DirectAdmin or Webuzo shared hosting with an .htaccess fallback rule; SSR and a full MEAN app need a Node.js process, on the App Platform or a VPS. The exact steps are in the Angular guide's hosting section.
Frequently asked questions
Is ComponentFactoryResolver still needed in Angular?
No. It is deprecated. Pass the component class directly to ViewContainerRef.createComponent(), or use the NgComponentOutlet directive in the template.
Should I use signals or RxJS for state in Angular?
Use signals for state that the UI displays, such as a cart or a selected item. Use RxJS for streams of events such as HTTP calls and search boxes, and convert the result to a signal with toSignal().
How do I add form fields at runtime in Angular?
Use a FormArray inside a reactive form, push a new FormControl when the user asks for another field, and render the controls with a @for block in the template.
Where can I host an Angular app with Domain India?
A static Angular build runs on shared hosting with an .htaccess rule that returns index.html for app routes. An app with server-side rendering or its own Node.js API needs the App Platform or a VPS.
Ready to go further? Read the Mastering Angular guide, follow the MEAN stack handbook, or see the App Platform for Node.js hosting.
Node.js apps are detected and built automatically, so an Angular app with server-side rendering deploys without a Dockerfile.
See App Platform plans