Armenvardanyan95

@Injectable({providedIn: 'root'})
export class PortalService {
    // we can have multiple portals
    portals = signal<Record<string, TemplateRef<any>>>({});

	// get one of the templates to use in your component
    getPortal(portalName: string) {
        return computed(() => this.portals()[portalName]);
    }

Armenvardanyan95

export class TodoStore {
    readonly #todoService = inject(TodoService);
    query = signal('');
    todosResource = httpResource(() => ({
        url: '/api/todos',
        params: { q: this.query() },
        method: 'get',
    }), 
   // use a default value and parsing with Zod                              
   {defaultValue: [], parse: todoListSchema.parse});

Armenvardanyan95

@Component({
    template: `
        @if (todo.hasValue()) {
            <form (ngSubmit)="save()">
                <input [(ngModel)]="todo.value().title" />
                <button type="submit">Save</button>
            </form>
        }
    `,
    imports: [FormsModule],

Armenvardanyan95

import { Component, computed, effect, inject, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin } from 'rxjs';
import { toSignal } from '@angular/core/rxjs-interop';

@Component({
  template: `
    @if (loading()) {
      <div>Loading...</div>
    } @else {

Armenvardanyan95

@Component({
    template: `
        @if (todos.hasValue()) {
            <select [(ngModel)]="todoId">
                @for (todo of todos.value(); track todo.id) {
                    <option [value]="todo.id">{{ todo.title }}</option>
                }
            </select>
        }
        @if (todo.hasValue()) {

Armenvardanyan95

@Component({
    template: `
        @if (todos.hasValue()) {
            <select [(ngModel)]="todoId">
                @for (todo of todos.value(); track todo.id) {
                    <option [value]="todo.id">{{ todo.title }}</option>
                }
            </select>
        }
        @if (todo.hasValue()) {

Armenvardanyan95

type ModelTypes = 'product' | 'order';

type Product = {productName: string};
type Order = {orderId: number};

type Model = {
    id: number;
    type: ModelTypes;
    entity: Product | Order;
}

Armenvardanyan95

@Injectable()
export class SomeService {
    data = 10;

    updateData() {
        this.data = 20;
    }
}

@Component({

Armenvardanyan95

@Injectable()
export class SomeService {
    data = 10;

    updateData() {
        this.data = 20;
    }
}

@Component({

Armenvardanyan95

// imagine we have a huge component that is highly customizable
// we could add a lot of inputs as options to it
<app-editor 
  [undoRedo]="true" 
  [copyPaste]="true" 
  [textFormatting]="true"/>

// or, we could use the power of content projection
// to both ensure design consistency and higher reusability