@NgModule({
//Declare components, directives, and pipes that belong to this module
    declarations: any[],
//Import modules whose exported classes are needed in this module
    imports: any[],
//Make components, directives, and pipes available to other modules
    exports: any[],
//Register services (injectables) that this module provides
    providers: any[],
    ...
})
export class MonMondule {}

@Component({
  selector: 'my-standalone_component',
  standalone: true, // This makes it a standalone component 
  imports: [CommonModule], // Can import standalone or NgModules
  template: `
    <h1>Hello from a standalone component!</h1>
<p>This component doesn't need to be declared in any NgModule.</p>
  `,
  styles: ...
})
export class HelloWorldComponent {
}

@Injectable({
  providedIn: 'root'
})
export class MonService {}

export class MonComponent {
  constructor(private readonly service: Service) {}
}

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

<p appHighlight>Je suis surligné</p>
<p>Pas moi</p>

<div>
    Hello {{ name }}
</div>

<button (click)="doSomething()">
    Click me !
</button>

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

// Create a reactive signal that holds a value
const count = signal(0); // ✅ signal<T>(initialValue)

// Create a computed signal that derives its value from another signal
// auto-updates when 'count' changes
const doubleCount = computed(() => count() * 2);

// Set up an effect to run logic whenever a signal changes
effect(() => {
  console.log(`Count is ${count()} and double is ${doubleCount()}`);
});

// Update the signal (triggers effect and recomputes doubleCount)
count.set(1);  // logs: Count is 1 and double is 2
count.update(n => n + 1);  // logs: Count is 2 and double is 4

increment() {
  this.count.update(n => n + 1);
}
reset() {
  this.count.set(0);
}

<h2>Signal Counter</h2>

<p>Current count: {{ count() }}</p> <!-- 👈 Use signal like a function -->

<button (click)="increment()">Increment</button>
<button (click)="reset()">Reset</button>

ng new first-app
cd first-app
npm install
npm start

ng generate component components/recipe

ng generate module custom-material

public recipe: Recipe = {
    description: "Les jolis voyages",
    instructions: [
        "Verser l’absinthe dans un verre. L’idéal serait un verre à absinthe, mais une petite coupe à dégustation peut faire l’affaire. Déposer la cuillère à absinthe sur le verre et y déposer le cube de sucre.",
        "Faire couler l’eau de source glacée très doucement, quelques gouttes à la fois, sur le cube de sucre. Enfin, remuer l’absinthe avec la cuillère et servir.",
        "À savourer en bonne compagnie, à 17 h, en écoutant de l’accordéon et en récitant Les Fleurs du Mal.",
        ""
    ],
    name: "l'absinthe",
    ingredients: [
        {
          	id:0,
            ingredient: {
          		id:1,
                name: "absinthe"
            },
            quantity: 1,
            unit: "Oz"
        },
        {
          	id:1,
            ingredient: {
          		id:6,
                name: "sucre"
            },
            quantity: 1,
            unit: "cube"
        },
        {
            id:2,
            "ingredient": {
                "id":4,
                "name": "eau de source glacée"
            },
            "quantity": 3,
            "unit": "oz"
        },
        {
            id:3,
            "ingredient": {
                id: 12,
                "name": "cuillère à absinthe perforée"
            },
            "quantity": 1,
            "unit": "cuillère"
        }
    ],
    picture: "https://upload.wikimedia.org/wikipedia/commons/e/e2/Absinthe-glass.jpg"
}

<ul>
    <li *ngFor="let item of itemList">
        {{ item }}
    </li>
</ul>

<div *ngIf="expressionBooleenne">
    Hello
</div>

@Input()
recipe: Recipe;

<mon-composant-enfant [recipe]="maRecette"></mon-composant-enfant>

ng add @angular/material

this.recipeService.getRecipes().subscribe({
    next: (result: Recipe[]) => { /* Traiter le résultat */ },
    error: (error) => { /* Traiter l'erreur */ }
});

@Pipe({ 
    name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {
    transform(param : InputType): OutputType {
        doSomething();
        return newValue;
    }
}