Armenvardanyan95

const fs = require('fs');
const path = require('path');

async function findMissingImports(projectRoot, directiveName, directiveClass) {
  const missingImportFiles = [];

  const searchDirectory = async (dir) => {
    const files = fs.readdirSync(dir);

    for (const file of files) {

Armenvardanyan95

"dependencies": {
    "@angular/animations": "^17.3.11",
    "@angular/cdk": "^16.2.14",
    "@angular/common": "^17.3.11",
    "@angular/compiler": "^17.3.11",
    "@angular/core": "^17.3.11",
    "@angular/forms": "^17.3.11",
    "@angular/localize": "^17.3.11",
    "@angular/material": "^16.2.0",
    "@angular/platform-browser": "^17.3.11",

Armenvardanyan95

@Component({
    template: `
        <form #form="ngForm" (ngSubmit)="submit(form)">
            <input type="text" name="name"
                [(ngModel)]="controls.name" placeholder="Name" />
            <input type="email" name="email"
                [(ngModel)]="controls.email" placeholder="Email" />
                <div ngModelGroup="address">
                    <input type="text" name="street"
                        [(ngModel)]="controls.address.street" 

Armenvardanyan95

@Injectable({ providedIn: 'root' })
export class TodosStore {
  readonly #todosService = inject(TodosService);
  query = signal('');
  #todos = rxResource({
    request: () => ({ query: this.query() }),
    loader: ({ request }) => 
      this.#todosService.getTodos(request.query),
  });
  // expose only a readonly value of the resource

Armenvardanyan95

@Component({
  template: `
    <h1>Capitals</h1>
    <ul>
      @for (capital of capitals.value(); track capital) {
         <li>{{ capital }}</li> 
      }
    </ul>
  `,
})

Armenvardanyan95

@Component({
  template: ``
    @if (post.isLoading()) {
        <span>Loading...</span>
    } @else if (post.hasValue()) {
        <h1>{{ post.value()!.title }}</h1>
        <p>{{ post.value()!.body }}</p>
        @if (author.hasValue()) {
            <div>
            <span>Author: </span>

Armenvardanyan95

import {Component, signal} from '@angular/core';

@Component({
  template: `
    <!-- More or less okay, as a big selling point for linked signals
         is to provide the ability of modifying the state from UI 
         by the end user -->
    <input [(ngModel)]="fullName" placeholder="Edit full name" />
  `,
})

Armenvardanyan95

@Component({
  template: `
    <!-- absolutely fine, signal getter just returns a value -->
    <p>{{ count() }}</p>
    <!-- also fine, the computation itself is irrelevant, 
         as it will only be performed when tracked signals change, not
         every time the computed signal is read  -->
    <p>{{ doubleCount() }}</p>
    <!-- fairly okayish, as the computation is very simple
         however, prefer using computed signals for such cases

Armenvardanyan95

@Component({
  template: `
    <p-tabView [activeIndex]="activeTab()" (onChange)="changeTab($event)">
      <p-tabPanel header="Tab 1">
        <p>Tab 1 Content</p>
      </p-tabPanel>
      <p-tabPanel header="Tab 2">
        <p>Tab 2 Content</p>
      </p-tabPanel>
      <p-tabPanel header="Tab 3">

Armenvardanyan95

@Component({
    template: `
        <h1 #heading>Mutation {{text()}}</h1>
        <input type="text" [(ngModel)]="text">

        @if(mutations$) {
            <span>{{ mutations$ | async }}</span>
        }
    `,
})