{"id":1908,"date":"2024-10-22T21:21:46","date_gmt":"2024-10-22T19:21:46","guid":{"rendered":"https:\/\/epicmarketing.co.il\/notebook\/?p=1908"},"modified":"2024-12-24T14:12:50","modified_gmt":"2024-12-24T12:12:50","slug":"whats-new-in-angular-16-17-18","status":"publish","type":"post","link":"https:\/\/epicmarketing.co.il\/notebook\/whats-new-in-angular-16-17-18\/","title":{"rendered":"\u05de\u05e2\u05d1\u05e8 \u05de\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15 \u05dc\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 18"},"content":{"rendered":"\n

\u05db\u05d9\u05d5\u05dd (22.10.24) \u05d4\u05d2\u05e8\u05e1\u05d4 \u05d4\u05e2\u05d3\u05db\u05e0\u05d9\u05ea \u05e9\u05dc \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 \u05d4\u05d9\u05d0 18. \u05de\u05db\u05d9\u05d5\u05d5\u05df \u05e9\u05e2\u05d3 \u05e2\u05db\u05e9\u05d9\u05d5 \u05db\u05ea\u05d1\u05ea\u05d9 \u05d1\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15, \u05d0\u05db\u05ea\u05d5\u05d1 \u05e2\u05dc \u05d4\u05de\u05e2\u05d1\u05e8 \u05d5\u05de\u05d4 \u05e9\u05d5\u05e0\u05d4 \u05d1\u05d2\u05e8\u05e1\u05d0\u05d5\u05ea \u05e9\u05e2\u05d1\u05e8\u05d5 \u05e2\u05d3 \u05e2\u05db\u05e9\u05d9\u05d5.<\/p>\n\n\n\n

\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 16<\/h2>\n\n\n\n

Standalone Components by Default<\/h3>\n\n\n\n

\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15 <\/strong>– standalone components \u05d4\u05d9\u05d5 \u05d6\u05de\u05d9\u05e0\u05d9\u05dd, \u05d0\u05d1\u05dc \u05dc\u05d0 \u05db\u05d1\u05e8\u05d9\u05e8\u05ea \u05de\u05d7\u05d3\u05dc. \u05e2\u05d3\u05d9\u05d9\u05df \u05d4\u05d9\u05d4 \u05d7\u05d9\u05d9\u05d1 \u05dc\u05d4\u05d9\u05d5\u05ea \u05de\u05d5\u05d3\u05d5\u05dc \u05d0\u05d7\u05d3 \u05dc\u05e4\u05d7\u05d5\u05ea.<\/p>\n\n\n

\n\/\/ app.module.ts\nimport { NgModule } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { AppComponent } from '.\/app.component';\nimport { MyComponent } from '.\/my.component';\n\n@NgModule({\n  declarations: [AppComponent, MyComponent],\n  imports: [BrowserModule],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n<\/pre><\/div>\n\n\n
\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 16<\/strong> – standalone components \u05e0\u05d5\u05e6\u05e8\u05d9\u05dd \u05db\u05d1\u05e8\u05d9\u05e8\u05ea \u05de\u05d7\u05d3\u05dc.<\/p>\n\n\n
\n\/\/ my.component.ts\nimport { Component } from '@angular\/core';\n\n@Component({\n  selector: 'app-my-component',\n  template: `<p>My Component works!<\/p>`,\n  standalone: true,\n})\nexport class MyComponent {}\n\n\/\/ main.ts\nimport { bootstrapApplication } from '@angular\/platform-browser';\nimport { AppComponent } from '.\/app.component';\n\nbootstrapApplication(AppComponent);\n<\/pre><\/div>\n\n\n
Signal-Based Reactivity<\/h3>\n\n\n\n
\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15<\/strong> – \u05e9\u05d9\u05de\u05d5\u05e9 \u05d1-rxjs \u05e2\u05dc \u05de\u05e0\u05ea \u05dc\u05e2\u05e7\u05d5\u05d1 \u05d0\u05d7\u05e8\u05d9 \u05e9\u05d9\u05e0\u05d5\u05d9\u05d9\u05dd \u05e9\u05e7\u05d5\u05e8\u05d9\u05dd \u05d1\u05d3\u05e3, \u05e9\u05d9\u05ea\u05d5\u05e3 \u05e9\u05dc \u05de\u05d9\u05d3\u05e2 \u05d1\u05d9\u05df \u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05d5\u05ea, \u05e7\u05d1\u05dc\u05ea \u05de\u05d9\u05d3\u05e2 \u05de-API \u05d5\u05db\u05d5' \u05db-reactive.<\/p>\n\n\n
\n\/\/ counter.component.ts\nimport { Component } from '@angular\/core';\n\n@Component({\n  selector: 'app-counter',\n  template: `\n    <p>Count: {{ count }}<\/p>\n    <button (click)="increment()">Increment<\/button>\n  `,\n})\nexport class CounterComponent {\n  count = 0;\n\n  increment() {\n    this.count++;\n  }\n}\n<\/pre><\/div>\n\n\n
\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 16<\/strong> – \u05e9\u05d9\u05de\u05d5\u05e9 \u05d1-Signals.<\/p>\n\n\n
\n\/\/ counter.component.ts\nimport { Component, signal } from '@angular\/core';\n\n@Component({\n  selector: 'app-counter',\n  template: `\n    <p>Count: {{ count() }}<\/p>\n    <button (click)="increment()">Increment<\/button>\n  `,\n  standalone: true,\n})\nexport class CounterComponent {\n  count = signal(0);\n\n  increment() {\n    this.count.update((value) => value + 1);\n  }\n}\n<\/pre><\/div>\n\n\n
Dependency Injection Enhancements with DestroyRef<\/h3>\n\n\n\n
\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15 <\/strong>– \u05e0\u05d9\u05e7\u05d9\u05d5\u05df \u05e9\u05dc \u05de\u05e9\u05d0\u05d1\u05d9\u05dd \u05d1\u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05ea ngOnDestroy<\/p>\n\n\n
\n\/\/ my.service.ts\nimport { Injectable, OnDestroy } from '@angular\/core';\nimport { Subscription } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class MyService implements OnDestroy {\n  private subscription: Subscription;\n\n  constructor() {\n    this.subscription = someObservable.subscribe();\n  }\n\n  ngOnDestroy() {\n    this.subscription.unsubscribe();\n  }\n}\n<\/pre><\/div>\n\n\n
\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 16<\/strong> – \u05e0\u05d9\u05e7\u05d9\u05d5\u05df \u05d9\u05e2\u05d9\u05dc \u05d9\u05d5\u05ea\u05e8 \u05e9\u05dc \u05de\u05e9\u05d0\u05d1\u05d9\u05dd \u05e2\u05dc \u05d9\u05d3\u05d9 \u05e9\u05d9\u05de\u05d5\u05e9 \u05d1-DestroyRef<\/p>\n\n\n
\n\/\/ my.service.ts\nimport { Injectable, inject, DestroyRef } from '@angular\/core';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class MyService {\n  private destroyRef = inject(DestroyRef);\n  private subscription = someObservable.subscribe();\n\n  constructor() {\n    this.destroyRef.onDestroy(() => {\n      this.subscription.unsubscribe();\n    });\n  }\n}\n<\/pre><\/div>\n\n\n
Route-Based Code Splitting with canLoad Guards<\/h3>\n\n\n\n
\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15<\/strong><\/p>\n\n\n
\n\/\/ app-routing.module.ts\nconst routes: Routes = [\n  {\n    path: 'admin',\n    loadChildren: () =>\n      import('.\/admin\/admin.module').then((m) => m.AdminModule),\n    canLoad: [AuthGuard],\n  },\n];\n<\/pre><\/div>\n\n\n
\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 16<\/strong> – \u05de\u05e0\u05d2\u05e0\u05d5\u05df lazy loading \u05de\u05e9\u05d5\u05e4\u05e8.<\/p>\n\n\n
\n\/\/ app-routing.module.ts\nimport { inject } from '@angular\/core';\n\nconst routes: Routes = [\n  {\n    path: 'admin',\n    loadComponent: () =>\n      import('.\/admin\/admin.component').then((m) => m.AdminComponent),\n    canMatch: [\n      () => inject(AuthService).isLoggedIn(),\n    ],\n  },\n];\n<\/pre><\/div>\n\n\n
Required Inputs<\/h3>\n\n\n\n
\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15<\/strong> – \u05d0\u05d9\u05df \u05d3\u05e8\u05da \u05dc\u05d0\u05db\u05d5\u05e3 \u05d1\u05d6\u05de\u05df \u05db\u05ea\u05d9\u05d1\u05ea \u05d4\u05e7\u05d5\u05d3 \u05e9\u05dc\u05d9\u05d7\u05d4 \u05e9\u05dc \u05e2\u05e8\u05da \u05d1-@Input.<\/p>\n\n\n
\n\/\/ my-component.component.ts\nimport { Component, Input } from '@angular\/core';\n\n@Component({\n  selector: 'my-component',\n  template: `<p>{{ name }}<\/p>`,\n})\nexport class MyComponent {\n  @Input() name!: string;\n}\n<\/pre><\/div>\n\n\n
\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 16<\/strong> – \u05d0\u05e4\u05e9\u05e8 \u05dc\u05e1\u05de\u05df \u05e2\u05e8\u05da \u05e9\u05dc @Input \u05db-required \u05d5\u05dc\u05ea\u05e4\u05d5\u05e1 \u05e9\u05d2\u05d9\u05d0\u05d5\u05ea \u05db\u05d1\u05e8 \u05d1\u05d6\u05de\u05df \u05e7\u05d5\u05de\u05e4\u05d9\u05dc\u05e6\u05d9\u05d4.<\/p>\n\n\n
\n\/\/ my-component.component.ts\nimport { Component, Input } from '@angular\/core';\n\n@Component({\n  selector: 'my-component',\n  template: `<p>{{ name }}<\/p>`,\n})\nexport class MyComponent {\n  @Input({ required: true }) name!: string;\n}\n<\/pre><\/div>\n\n\n
Router Inputs<\/h3>\n\n\n\n
\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15<\/strong> – \u05db\u05d3\u05d9 \u05dc\u05e7\u05d1\u05dc \u05e4\u05e8\u05de\u05d8\u05e8\u05d9\u05dd \u05e9\u05e2\u05d5\u05d1\u05e8\u05d9\u05dd \u05d1\u05db\u05ea\u05d5\u05d1\u05ea, \u05e6\u05e8\u05d9\u05da \u05dc\u05d7\u05dc\u05e5 \u05d0\u05d5\u05ea\u05dd \u05dc\u05ea\u05d5\u05da \u05de\u05e9\u05ea\u05e0\u05d4.<\/p>\n\n\n
\n\/\/ article.component.ts\nimport { Component, OnInit } from '@angular\/core';\nimport { ActivatedRoute } from '@angular\/router';\n\n@Component({\n  selector: 'app-article',\n  template: `<p>Article ID: {{ articleId }}<\/p>`,\n})\nexport class ArticleComponent implements OnInit {\n  articleId?: string;\n\n  constructor(private route: ActivatedRoute) {}\n\n  ngOnInit() {\n    this.articleId = this.route.snapshot.paramMap.get('articleId') ?? undefined;\n  }\n}\n<\/pre><\/div>\n\n\n
\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 16<\/strong> – \u05d0\u05e4\u05e9\u05e8 \u05dc\u05e7\u05d1\u05dc \u05de\u05e9\u05ea\u05e0\u05d9\u05dd \u05e9\u05e2\u05d5\u05d1\u05e8\u05d9\u05dd \u05d1\u05db\u05ea\u05d5\u05d1\u05ea \u05d9\u05e9\u05d9\u05e8\u05d5\u05ea \u05dc\u05ea\u05d5\u05da \u05de\u05e9\u05ea\u05e0\u05d4 input.<\/p>\n\n\n
\n\/\/ app.module.ts\nimport { RouterModule, withComponentInputBinding } from '@angular\/router';\n\n@NgModule({\n  imports: [\n    RouterModule.forRoot(routes, {\n      bindToComponentInputs: true,\n    }),\n    \/\/ or\n    RouterModule.forRoot(routes, withComponentInputBinding()),\n  ],\n})\nexport class AppModule {}\n<\/pre><\/div>\n\n
\n\/\/ app-routing.module.ts\nconst routes: Routes = [\n  {\n    path: 'articles\/:articleId',\n    component: ArticleComponent,\n  },\n];\n<\/pre><\/div>\n\n
\n\/\/ article.component.ts\nimport { Component, Input } from '@angular\/core';\n\n@Component({\n  selector: 'app-article',\n  template: `<p>Article ID: {{ articleId }}<\/p>`,\n})\nexport class ArticleComponent {\n  @Input() articleId?: string;\n}\n<\/pre><\/div>\n\n\n
\u05d4\u05e8\u05d7\u05d1\u05d4 – Standalone Components<\/h2>\n\n\n\n
Standalone Components \u05d4\u05df \u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05d5\u05ea \u05e9\u05dc\u05d0 \u05de\u05d5\u05d2\u05d3\u05e8\u05d5\u05ea \u05d1\u05de\u05d5\u05d3\u05d5\u05dc \u05d5\u05de\u05e1\u05d5\u05de\u05e0\u05d5\u05ea \u05d1-standalone: true. \u05d4\u05d4\u05d2\u05d3\u05e8\u05d4 \u05d4\u05d6\u05d0\u05ea \u05de\u05d0\u05e4\u05e9\u05e8\u05ea \u05dc\u05d4\u05df \u05dc\u05d4\u05d9\u05d5\u05ea \u05e2\u05e6\u05de\u05d0\u05d9\u05d5\u05ea \u05d5\u05de\u05e4\u05e9\u05d8\u05ea \u05d0\u05ea \u05de\u05d1\u05e0\u05d4 \u05d4\u05d0\u05e4\u05dc\u05d9\u05e7\u05e6\u05d9\u05d4.<\/p>\n\n\n\n
\u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05d4 \u05e9\u05d4\u05d9\u05d0 Standalone \u05e6\u05e8\u05d9\u05db\u05d4 \u05dc\u05d3\u05d0\u05d5\u05d2 \u05dc\u05d1\u05d3 \u05dc\u05d9\u05d9\u05d1\u05d5\u05d0 \u05e9\u05dc \u05db\u05dc \u05de\u05d4 \u05e9\u05d4\u05d9\u05d0 \u05de\u05e9\u05ea\u05de\u05e9\u05ea \u05d1\u05d5, \u05d0\u05d9\u05df \u05dc\u05d4 \u05e7\u05d5\u05d1\u05e5 \u05de\u05d5\u05d3\u05d5\u05dc \u05dc\u05e1\u05de\u05d5\u05da \u05e2\u05dc\u05d9\u05d5.<\/p>\n\n\n\n
\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15<\/strong><\/p>\n\n\n\n
app.module.ts<\/strong><\/p>\n\n\n
\nimport { NgModule } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { AppComponent } from '.\/app.component';\nimport { HomeComponent } from '.\/home\/home.component';\n\n@NgModule({\n  declarations: [AppComponent, HomeComponent],\n  imports: [BrowserModule],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n<\/pre><\/div>\n\n\n
home.component.ts<\/strong><\/p>\n\n\n
\nimport { Component } from '@angular\/core';\n\n@Component({\n  selector: 'app-home',\n  template: `<h1>Welcome to the Home Component!<\/h1>`,\n})\nexport class HomeComponent {}\n<\/pre><\/div>\n\n\n
\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 16<\/strong><\/p>\n\n\n\n
home.component.ts<\/strong><\/p>\n\n\n
\nimport { Component } from '@angular\/core';\nimport { CommonModule } from '@angular\/common';\n\n@Component({\n  selector: 'app-home',\n  template: `<h1>Welcome to the Standalone Home Component!<\/h1>`,\n  standalone: true,\n  imports: [CommonModule],\n})\nexport class HomeComponent {}\n<\/pre><\/div>\n\n\n
\u05db\u05d3\u05d9 \u05dc\u05d4\u05e9\u05ea\u05de\u05e9 \u05d1-Standalone Component \u05d1\u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05d5\u05ea \u05d0\u05d7\u05e8\u05d5\u05ea, \u05e6\u05e8\u05d9\u05da \u05dc\u05d9\u05d9\u05d1\u05d0 \u05d0\u05d5\u05ea\u05d4.<\/p>\n\n\n\n
parent.component.ts<\/strong><\/p>\n\n\n
\nimport { Component } from '@angular\/core';\nimport { MyStandaloneComponent } from '.\/my-standalone.component';\n\n@Component({\n  selector: 'app-parent',\n  template: `\n    <h1>Parent Component<\/h1>\n    <app-my-standalone><\/app-my-standalone>\n  `,\n  standalone: true,\n  imports: [MyStandaloneComponent],\n})\nexport class ParentComponent {}\n<\/pre><\/div>\n\n\n
\u05d0\u05e4\u05e9\u05e8 \u05dc\u05d4\u05d2\u05d3\u05d9\u05e8 \u05dc\u05d0\u05e4\u05dc\u05d9\u05e7\u05e6\u05d9\u05d4 \u05de\u05d4 \u05ea\u05d4\u05d9\u05d4 \u05d4\u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05d4 \u05d4\u05d4\u05ea\u05d7\u05dc\u05ea\u05d9\u05ea.<\/p>\n\n\n\n
main.ts<\/strong><\/p>\n\n\n
\nimport { bootstrapApplication } from '@angular\/platform-browser';\nimport { AppComponent } from '.\/app.component';\n\nbootstrapApplication(AppComponent);\n<\/pre><\/div>\n\n\n
\u05e9\u05d9\u05de\u05d5\u05e9 \u05d1-Lazy Loading<\/p>\n\n\n\n
app.routes.ts<\/strong><\/p>\n\n\n
\nimport { Routes } from '@angular\/router';\n\nexport const routes: Routes = [\n  {\n    path: 'dashboard',\n    loadComponent: () =>\n      import('.\/dashboard\/dashboard.component').then((m) => m.DashboardComponent),\n  },\n];\n<\/pre><\/div>\n\n\n
\u05d4\u05d6\u05e8\u05e7\u05ea services<\/p>\n\n\n
\n\/\/ component-with-provider.component.ts\nimport { Component } from '@angular\/core';\nimport { MyService } from '.\/my-service.service';\n\n@Component({\n  selector: 'app-component-with-provider',\n  template: `<p>Component with a service provider.<\/p>`,\n  standalone: true,\n  providers: [MyService],\n})\nexport class ComponentWithProviderComponent {}\n<\/pre><\/div>\n\n\n
Standalone Directive<\/p>\n\n\n
\n\/\/ highlight.directive.ts\nimport { Directive, ElementRef, Renderer2, HostListener } from '@angular\/core';\n\n@Directive({\n  selector: '[appHighlight]',\n  standalone: true,\n})\nexport class HighlightDirective {\n  constructor(private el: ElementRef, private renderer: Renderer2) {}\n\n  @HostListener('mouseenter') onMouseEnter() {\n    this.highlight('yellow');\n  }\n  @HostListener('mouseleave') onMouseLeave() {\n    this.highlight(null);\n  }\n  private highlight(color: string | null) {\n    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);\n  }\n}\n<\/pre><\/div>\n\n\n
Standalone Pipe<\/p>\n\n\n
\n\/\/ truncate.pipe.ts\nimport { Pipe, PipeTransform } from '@angular\/core';\n\n@Pipe({\n  name: 'truncate',\n  standalone: true,\n})\nexport class TruncatePipe implements PipeTransform {\n  transform(value: string, limit: number = 20): string {\n    return value.length > limit ? value.substring(0, limit) + '...' : value;\n  }\n}\n<\/pre><\/div>\n\n\n
\u05de\u05db\u05d9\u05d5\u05d5\u05df \u05e9\u05d0\u05d9\u05df \u05de\u05d5\u05d3\u05d5\u05dc\u05d9\u05dd \u05d1\u05ea\u05d5\u05db\u05e0\u05d9\u05ea, \u05d0\u05e8\u05d2\u05d5\u05df \u05d4\u05e7\u05d1\u05e6\u05d9\u05dd \u05dc\u05d0 \u05d9\u05d4\u05d9\u05d4 \u05dc\u05e4\u05d9 \u05de\u05d5\u05d3\u05d5\u05dc\u05d9\u05dd \u05d0\u05dc\u05d0 \u05dc\u05e4\u05d9 features.<\/p>\n\n\n
\nsrc\/\n\u2514\u2500\u2500 app\/\n    \u251c\u2500\u2500 features\/\n    \u2502   \u251c\u2500\u2500 feature1\/\n    \u2502   \u2502   \u251c\u2500\u2500 feature1.component.ts\n    \u2502   \u2502   \u251c\u2500\u2500 feature1.component.html\n    \u2502   \u2502   \u251c\u2500\u2500 feature1.service.ts\n    \u2502   \u251c\u2500\u2500 feature2\/\n    \u2502       \u251c\u2500\u2500 feature2.component.ts\n    \u2502       \u251c\u2500\u2500 feature2.component.html\n    \u2502       \u251c\u2500\u2500 feature2.service.ts\n    \u251c\u2500\u2500 shared\/\n        \u251c\u2500\u2500 components\/\n        \u251c\u2500\u2500 directives\/\n        \u251c\u2500\u2500 pipes\/\n<\/pre><\/div>\n\n\n
\u05d0\u05e4\u05e9\u05e8 \u05dc\u05e9\u05dc\u05d1 \u05d1\u05ea\u05d5\u05db\u05e0\u05d9\u05ea \u05e9\u05d9\u05de\u05d5\u05e9 \u05d1\u05de\u05d5\u05d3\u05d5\u05dc\u05d9\u05dd \u05d5\u05d1-standalone components.<\/p>\n\n\n\n
\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 17<\/h2>\n\n\n\n
New Built-in Control Flow Directives<\/h3>\n\n\n\n
\u05e9\u05d9\u05de\u05d5\u05e9 \u05d1-directives \u05e9\u05de\u05d5\u05d1\u05e0\u05d9\u05dd \u05d1\u05ea\u05d5\u05da \u05d4\u05e7\u05d5\u05d3.<\/p>\n\n\n\n
\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15<\/strong><\/p>\n\n\n
\n<!-- Using *ngIf -->\n<div *ngIf="condition">\n  Content displayed if condition is true.\n<\/div>\n\n<!-- Using *ngFor -->\n<ul>\n  <li *ngFor="let item of items; trackBy: trackByFn">\n    {{ item }}\n  <\/li>\n<\/ul>\n\n<!-- Using *ngSwitch -->\n<div [ngSwitch]="value">\n  <div *ngSwitchCase="'case1'">Case 1 content<\/div>\n  <div *ngSwitchCase="'case2'">Case 2 content<\/div>\n  <div *ngSwitchDefault>Default content<\/div>\n<\/div>\n<\/pre><\/div>\n\n\n
\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 17<\/strong><\/p>\n\n\n
\n<!-- Using @if -->\n@if(condition){\n  <div>\n    Content displayed if condition is true.\n  <\/div>\n}\n\n@if (a > b) {\n  {{a}} is greater than {{b}}\n} @else if (b > a) {\n  {{a}} is less than {{b}}\n} @else {\n  {{a}} is equal to {{b}}\n}\n\n<!-- Using @for -->\n<ul>\n  @for(item of items; track item.id; let i = $index){\n    <li>\n      {{ item }}\n    <\/li>\n  }\n<\/ul>\n\n@for (item of items; track item.name) {\n  <li> {{ item.name }}<\/li>\n} @empty {\n  <li aria-hidden="true"> There are no items. <\/li>\n}\n\n<!-- Using @switch -->\n<div>\n  @switch(value){\n    @case('case1'){\n      <div>Case 1 content<\/div>\n    }\n    @case('case2'){\n      <div>Case 2 content<\/div>\n    }\n    @default{\n      <div >Default content<\/div>\n    }\n  }\n<\/div>\n<\/pre><\/div>\n\n\n
Enhanced Deferred Loading<\/h3>\n\n\n\n
\u05e9\u05d9\u05de\u05d5\u05e9 \u05d1-lazy loading \u05de\u05e9\u05d5\u05e4\u05e8 \u05e9\u05dc \u05d9\u05d3\u05d9 \u05e9\u05d9\u05de\u05d5\u05e9 \u05d1-@defer.<\/p>\n\n\n\n
\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15<\/strong><\/p>\n\n\n
\n\/\/ app-routing.module.ts\nconst routes: Routes = [\n  {\n    path: 'feature',\n    loadChildren: () =>\n      import('.\/feature\/feature.module').then((m) => m.FeatureModule),\n  },\n];\n<\/pre><\/div>\n\n\n
\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 17<\/strong><\/p>\n\n\n
\n<!-- Template -->\n<div @defer (onIdle)="loadComponent()">\n  <!-- Content to be loaded lazily -->\n<\/div>\n<\/pre><\/div>\n\n
\n\/\/ app-routing.module.ts\nconst routes: Routes = [\n  {\n    path: 'feature',\n    loadComponent: () =>\n      import('.\/feature\/feature.component').then((c) => c.FeatureComponent),\n    canActivate: ['defer'],\n  },\n];\n<\/pre><\/div>\n\n\n
Support for Custom Element Bindings and Providers<\/h3>\n\n\n\n
\u05d0\u05d9\u05e0\u05d8\u05d2\u05e8\u05e6\u05d9\u05d4 \u05d8\u05d5\u05d1\u05d4 \u05d9\u05d5\u05ea\u05e8 \u05dc\u05d0\u05dc\u05de\u05e0\u05d8\u05d9\u05dd \u05de\u05d9\u05d5\u05e6\u05e8\u05d9\u05dd \u05d0\u05d9\u05e9\u05d9\u05ea.<\/p>\n\n\n\n
\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15<\/strong><\/p>\n\n\n
\n\/\/ Defining a custom element\nimport { Component, NgModule, Injector } from '@angular\/core';\nimport { createCustomElement } from '@angular\/elements';\n\n@Component({\n  selector: 'my-element',\n  template: `<p>My Custom Element<\/p>`,\n})\nexport class MyElementComponent {}\n\n\/\/ Module declaration\n@NgModule({\n  declarations: [MyElementComponent],\n  entryComponents: [MyElementComponent],\n})\nexport class AppModule {\n  constructor(private injector: Injector) {\n    const el = createCustomElement(MyElementComponent, { injector });\n    customElements.define('my-element', el);\n  }\n}\n<\/pre><\/div>\n\n\n
\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 17<\/strong><\/p>\n\n\n
\n\/\/ Using standalone components\nimport { Component, inject } from '@angular\/core';\n\n@Component({\n  selector: 'my-element',\n  template: `<p>My Custom Element<\/p>`,\n  standalone: true,\n})\nexport class MyElementComponent {}\n\n\/\/ Defining the custom element\nconst el = createCustomElement(MyElementComponent, {\n  injector: inject(Injector),\n});\ncustomElements.define('my-element', el);\n<\/pre><\/div>\n\n\n
\u05d4\u05e8\u05d7\u05d1\u05d4 – @defer<\/h2>\n\n\n\n
@defer \u05d4\u05d5\u05d0 directive \u05e9\u05de\u05d0\u05e4\u05e9\u05e8 lazy loading \u05dc\u05d7\u05dc\u05e7\u05d9\u05dd \u05e9\u05dc \u05d4\u05ea\u05d1\u05e0\u05d9\u05ea. \u05db\u05dc\u05d5\u05de\u05e8 \u05dc\u05d0 \u05dc\u05d8\u05e2\u05d5\u05df \u05d7\u05dc\u05e7\u05d9\u05dd \u05de\u05e1\u05d5\u05d9\u05d9\u05de\u05d9\u05dd \u05e2\u05d3 \u05e9\u05ea\u05e0\u05d0\u05d9 \u05de\u05ea\u05e7\u05d9\u05d9\u05dd. \u05de\u05d4 \u05e9\u05de\u05d9\u05d9\u05e6\u05e8 \u05d8\u05e2\u05d9\u05e0\u05d4 \u05e8\u05d0\u05e9\u05d5\u05e0\u05d9\u05ea \u05de\u05d4\u05d9\u05e8\u05d4 \u05d9\u05d5\u05ea\u05e8 \u05e9\u05dc \u05d4\u05d3\u05e3.<\/p>\n\n\n\n
Load Content When Browser is Idle<\/h3>\n\n\n\n
\u05d4\u05ea\u05d5\u05db\u05df \u05d9\u05d8\u05e2\u05df \u05e8\u05e7 \u05db\u05e9\u05d4\u05d3\u05e4\u05d3\u05e4\u05df \u05e4\u05e0\u05d5\u05d9, \u05de\u05d4 \u05e9\u05de\u05d0\u05e4\u05e9\u05e8 \u05d8\u05e2\u05d9\u05e0\u05d4 \u05de\u05d4\u05d9\u05e8\u05d4 \u05e9\u05dc \u05d7\u05dc\u05e7\u05d9\u05dd \u05e9\u05dc \u05d4\u05d3\u05e3 \u05d5\u05d4\u05ea\u05d5\u05db\u05df \u05d4\u05db\u05d1\u05d3 \u05d9\u05d8\u05e2\u05df \u05e8\u05e7 \u05d0\u05d7\u05e8 \u05db\u05da.<\/p>\n\n\n
\n<div @defer (onIdle)>\n  <!-- Content to load when the browser is idle -->\n  <app-heavy-component><\/app-heavy-component>\n  <ng-template #loading>\n    <p>Loading component...<\/p>\n  <\/ng-template>\n<\/div>\n<\/pre><\/div>\n\n\n
Load Content When Element is Visible<\/h3>\n\n\n\n
\u05d8\u05e2\u05d9\u05e0\u05d4 \u05e9\u05dc \u05d7\u05dc\u05e7 \u05e8\u05e7 \u05db\u05d0\u05e9\u05e8 \u05d4\u05de\u05e9\u05ea\u05de\u05e9 \u05d2\u05dc\u05dc \u05d5\u05d4\u05d2\u05d9\u05e2 \u05dc\u05d7\u05dc\u05e7 \u05d4\u05d6\u05d4 \u05d1\u05d3\u05e3.<\/p>\n\n\n
\n<div @defer (onVisible)>\n  <!-- Content to load when visible in the viewport -->\n  <img src="large-image.jpg" alt="Large Image" \/>\n  <ng-template #loading>\n    <p>Image is loading...<\/p>\n  <\/ng-template>\n<\/div>\n<\/pre><\/div>\n\n\n
Load Content After a Delay<\/h3>\n\n\n\n
\u05d8\u05e2\u05d9\u05e0\u05ea \u05ea\u05d5\u05db\u05df \u05e8\u05e7 \u05d0\u05d7\u05e8\u05d9 \u05d6\u05de\u05df \u05de\u05e1\u05d5\u05d9\u05d9\u05dd.<\/p>\n\n\n
\n<div @defer (onTimer)="3000">\n  <!-- Content to load after 3 seconds -->\n  <app-delayed-content><\/app-delayed-content>\n<\/div>\n<\/pre><\/div>\n\n\n
Load Content on User Interaction<\/h3>\n\n\n\n
\u05d8\u05e2\u05d9\u05e0\u05ea \u05ea\u05d5\u05db\u05df \u05e8\u05e7 \u05d0\u05d7\u05e8\u05d9 \u05e4\u05e2\u05d5\u05dc\u05d4 \u05e9\u05dc \u05d4\u05de\u05e9\u05ea\u05de\u05e9.<\/p>\n\n\n
\n<button @defer (onInteraction)>\n  Show Details\n  <ng-template>\n    <!-- Deferred content -->\n    <app-details><\/app-details>\n  <\/ng-template>\n<\/button>\n<\/pre><\/div>\n\n\n
Best Practices<\/h3>\n\n\n\n
    \n
  1. \u05dc\u05d4\u05e9\u05ea\u05de\u05e9 \u05d1-@defer \u05e2\u05dc \u05de\u05e0\u05ea \u05dc\u05d2\u05e8\u05d5\u05dd \u05dc\u05ea\u05d5\u05db\u05df \u05d4\u05d7\u05e9\u05d5\u05d1 \u05e9\u05dc \u05d4\u05d3\u05e3 \u05dc\u05d4\u05d8\u05e2\u05df \u05e8\u05d0\u05e9\u05d5\u05df \u05d5\u05dc\u05e7\u05e6\u05e8 \u05d0\u05ea \u05d6\u05de\u05df \u05d4\u05d8\u05e2\u05d9\u05e0\u05d4 \u05d4\u05e8\u05d0\u05e9\u05d5\u05e0\u05d9.<\/li>\n\n\n\n
  2. @defer \u05d0\u05de\u05e0\u05dd \u05de\u05e9\u05e4\u05e8 \u05d1\u05d9\u05e6\u05d5\u05e2\u05d9\u05dd, \u05d0\u05d1\u05dc \u05e9\u05d9\u05de\u05d5\u05e9 \u05d9\u05ea\u05e8 \u05d9\u05db\u05d5\u05dc \u05d3\u05d5\u05e7\u05d0 \u05dc\u05d4\u05d6\u05d9\u05e7 \u05dc\u05d4\u05dd.<\/li>\n\n\n\n
  3. \u05dc\u05d4\u05e9\u05ea\u05de\u05e9 \u05d1-loading \u05e2\u05dc \u05de\u05e0\u05ea \u05d4\u05d5\u05d3\u05d9\u05e2 \u05dc\u05de\u05e9\u05ea\u05de\u05e9 \u05de\u05d4 \u05e7\u05d5\u05e8\u05d4, \u05db\u05d3\u05d9 \u05e9\u05d9\u05d3\u05e2 \u05e9\u05d4\u05ea\u05d5\u05db\u05df \u05e0\u05d8\u05e2\u05df.<\/li>\n\n\n\n
  4. \u05dc\u05d1\u05d3\u05d5\u05e7 \u05d1\u05d9\u05e6\u05d5\u05e2\u05d9\u05dd \u05e2\u05dd \u05d5\u05d1\u05dc\u05d9 @defer.<\/li>\n\n\n\n
  5. @defer \u05d9\u05db\u05d5\u05dc \u05dc\u05d4\u05e9\u05e4\u05d9\u05e2 \u05e2\u05dc SEO \u05de\u05db\u05d9\u05d5\u05d5\u05df \u05e9\u05d7\u05dc\u05e7 \u05de\u05d4\u05ea\u05d5\u05db\u05df \u05dc\u05d0 \u05e0\u05d8\u05e2\u05df \u05d1\u05e4\u05e2\u05dd \u05d4\u05e8\u05d0\u05e9\u05d5\u05e0\u05d4.<\/li>\n\n\n\n
  6. \u05e0\u05d2\u05d9\u05e9\u05d5\u05ea – \u05dc\u05e8\u05d0\u05d5\u05ea \u05e9\u05d4\u05e9\u05d9\u05de\u05d5\u05e9 \u05d1-@defer \u05dc\u05d0 \u05e4\u05d5\u05d2\u05e2 \u05d1\u05e0\u05d2\u05d9\u05e9\u05d5\u05ea.<\/li>\n<\/ol>\n\n\n\n
    \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 18<\/h2>\n\n\n\n
    Route Redirects as Functions<\/h3>\n\n\n\n
    \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15<\/strong><\/p>\n\n\n
    \n\/\/ app-routing.module.ts (Angular 15)\nconst routes: Routes = [\n  { path: 'home', component: HomeComponent },\n  { path: 'dashboard', redirectTo: '\/user\/dashboard' },\n];\n<\/pre><\/div>\n\n\n
    \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 18<\/strong><\/p>\n\n\n
    \n\/\/ app.routes.ts (Angular 18)\nimport { Routes, Router } from '@angular\/router';\nimport { inject } from '@angular\/core';\n\nconst routes: Routes = [\n  { path: 'home', component: HomeComponent },\n  {\n    path: 'dashboard',\n    redirectTo: (route) => {\n      const queryParams = route.queryParams;\n      const isAdmin = queryParams['admin'];\n      const router = inject(Router);\n\n      if (isAdmin === 'true') {\n        return '\/admin\/dashboard';\n      } else if (isAdmin === 'false') {\n        return '\/user\/dashboard';\n      } else {\n        \/\/ Handle error or redirect to not-found\n        return '\/not-found';\n      }\n    },\n  },\n];\n<\/pre><\/div>\n\n\n
    Fallback Content for ng-content<\/h3>\n\n\n\n
    \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15<\/strong><\/p>\n\n\n
    \n\/\/ custom-widget.component.ts (Angular 15)\nimport { Component } from '@angular\/core';\n\n@Component({\n  selector: 'app-custom-widget',\n  template: `\n    <ng-content select=".header"><\/ng-content>\n    <ng-content><\/ng-content>\n  `,\n})\nexport class CustomWidgetComponent {}\n<\/pre><\/div>\n\n
    \n<app-custom-widget>\n  <span class="header">Custom Header<\/span>\n  <p>Custom Content<\/p>\n<\/app-custom-widget>\n<\/pre><\/div>\n\n\n
    \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 18<\/strong><\/p>\n\n\n
    \n\/\/ custom-widget.component.ts (Angular 18)\nimport { Component } from '@angular\/core';\n\n@Component({\n  selector: 'app-custom-widget',\n  template: `\n    <ng-content select=".header">Default Header<\/ng-content>\n    <ng-content>Default Content<\/ng-content>\n  `,\n})\nexport class CustomWidgetComponent {}\n<\/pre><\/div>\n\n
    \n<!-- Using default content -->\n<app-custom-widget><\/app-custom-widget>\n\n<!-- Overriding default header -->\n<app-custom-widget>\n  <span class="header">New Header<\/span>\n<\/app-custom-widget>\n<\/pre><\/div>\n\n\n
    Form's New Control State Change Events<\/h3>\n\n\n\n
    \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15<\/strong><\/p>\n\n\n
    \n\/\/ form.component.ts (Angular 15)\nimport { Component } from '@angular\/core';\nimport { FormControl, Validators } from '@angular\/forms';\n\n@Component({\n  selector: 'app-form',\n  template: `<input [formControl]="nameControl" \/>`,\n})\nexport class FormComponent {\n  nameControl = new FormControl('', Validators.required);\n\n  constructor() {\n    this.nameControl.valueChanges.subscribe((value) => {\n      console.log('Value changed:', value);\n    });\n\n    this.nameControl.statusChanges.subscribe((status) => {\n      console.log('Status changed:', status);\n    });\n  }\n}\n<\/pre><\/div>\n\n\n
    \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 18<\/strong><\/p>\n\n\n
    \n\/\/ form.component.ts (Angular 18)\nimport { Component } from '@angular\/core';\nimport { FormControl, Validators } from '@angular\/forms';\n\n@Component({\n  selector: 'app-form',\n  template: `<input [formControl]="nameControl" \/>`,\n})\nexport class FormComponent {\n  nameControl = new FormControl('', Validators.required);\n\n  constructor() {\n    this.nameControl.events.subscribe((event) => {\n      if (event.type === 'valueChange') {\n        console.log('Value changed:', event.value);\n      } else if (event.type === 'statusChange') {\n        console.log('Status changed:', event.status);\n      }\n    });\n  }\n}\n<\/pre><\/div>\n\n\n
    \u05d4\u05e8\u05d7\u05d1\u05d4 – signals<\/h2>\n\n\n\n
    signals \u05d4\u05d5\u05d0 \u05e1\u05d5\u05d2 \u05de\u05e9\u05ea\u05e0\u05d4 \u05e9\u05de\u05d0\u05e4\u05e9\u05e8 \u05e8\u05d9\u05d0\u05e7\u05d8\u05d9\u05d1\u05d9\u05d5\u05ea, \u05db\u05dc\u05d5\u05de\u05e8 \u05db\u05e9\u05d4\u05e2\u05e8\u05da \u05e9\u05dc \u05d4\u05de\u05e9\u05ea\u05e0\u05d4 \u05de\u05e9\u05ea\u05e0\u05d4, \u05ea\u05d4\u05d9\u05d4 \u05d4\u05e9\u05e4\u05e2\u05d4 \u05e2\u05dc \u05db\u05dc \u05de\u05d9 \u05e9\u05ea\u05dc\u05d5\u05d9 \u05d1\u05de\u05e9\u05ea\u05e0\u05d4 \u05d4\u05d6\u05d4.<\/p>\n\n\n\n
    \u05d3\u05d5\u05d2\u05de\u05d0\u05d5\u05ea \u05dc\u05e9\u05d9\u05de\u05d5\u05e9 \u05d1-signals.<\/p>\n\n\n\n
    Fetching Data from an API and Displaying It in a Component<\/h3>\n\n\n\n
    \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15<\/strong> – \u05e9\u05d9\u05de\u05d5\u05e9 \u05d1-rxjs \u05e2\u05dc \u05de\u05e0\u05ea \u05dc\u05e7\u05d1\u05dc \u05de\u05d9\u05d3\u05e2 \u05de-API.<\/p>\n\n\n\n
    data.service.ts<\/strong><\/p>\n\n\n
    \nimport { Injectable } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\nimport { Observable } from 'rxjs';\n\nexport interface Item {\n  id: number;\n  name: string;\n}\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DataService {\n  private apiUrl = 'https:\/\/api.example.com\/items';\n\n  constructor(private http: HttpClient) {}\n\n  getItems(): Observable<Item[]> {\n    return this.http.get<Item[]>(this.apiUrl);\n  }\n}\n<\/pre><\/div>\n\n\n
    item-list.component.ts<\/strong><\/p>\n\n\n
    \nimport { Component, OnInit } from '@angular\/core';\nimport { DataService, Item } from '..\/data.service';\n\n@Component({\n  selector: 'app-item-list',\n  template: `\n    <h2>Items<\/h2>\n    <ul *ngIf="items">\n      <li *ngFor="let item of items">{{ item.name }}<\/li>\n    <\/ul>\n  `,\n})\nexport class ItemListComponent implements OnInit {\n  items: Item[] = [];\n\n  constructor(private dataService: DataService) {}\n\n  ngOnInit() {\n    this.dataService.getItems().subscribe((data) => (this.items = data));\n  }\n}\n<\/pre><\/div>\n\n\n
    \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 17<\/strong> – \u05e9\u05d9\u05de\u05d5\u05e9 \u05d1-signals.<\/p>\n\n\n\n
    data.service.ts<\/strong><\/p>\n\n\n
    \nimport { Injectable, signal } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\n\nexport interface Item {\n  id: number;\n  name: string;\n}\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DataService {\n  private apiUrl = 'https:\/\/api.example.com\/items';\n  items = signal<Item[]>([]);\n\n  constructor(private http: HttpClient) {\n    this.fetchItems();\n  }\n\n  fetchItems() {\n    this.http.get<Item[]>(this.apiUrl).subscribe((data) => this.items.set(data));\n  }\n}\n<\/pre><\/div>\n\n\n
    item-list.component.ts<\/p>\n\n\n
    \nimport { Component } from '@angular\/core';\nimport { DataService } from '..\/data.service';\n\n@Component({\n  selector: 'app-item-list',\n  template: `\n    <h2>Items<\/h2>\n    <ul>\n      <li *ngFor="let item of items()">{{ item.name }}<\/li>\n    <\/ul>\n  `,\n})\nexport class ItemListComponent {\n  items = this.dataService.items;\n\n  constructor(private dataService: DataService) {}\n}\n<\/pre><\/div>\n\n\n
    \u05d3\u05d5\u05d2\u05de\u05d0 \u05e0\u05d5\u05e1\u05e4\u05ea – \u05e9\u05d9\u05de\u05d5\u05e9 \u05d1\u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d9\u05ea post.<\/span><\/strong><\/p>\n\n\n\n
    \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15<\/strong><\/p>\n\n\n\n
    data.service.ts<\/p>\n\n\n
    \nimport { Injectable } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\nimport { Observable } from 'rxjs';\n\nexport interface ItemDetails {\n  id: number;\n  name: string;\n  description: string;\n  \/\/ Other properties...\n}\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DataService {\n  private apiUrl = 'https:\/\/api.example.com\/item-details';\n\n  constructor(private http: HttpClient) {}\n\n  getItemDetails(id: number): Observable<ItemDetails> {\n    const body = { id: id };\n    return this.http.post<ItemDetails>(this.apiUrl, body);\n  }\n}\n<\/pre><\/div>\n\n\n
    item-detail.component.ts<\/p>\n\n\n
    \nimport { Component, OnInit } from '@angular\/core';\nimport { DataService, ItemDetails } from '..\/data.service';\n\n@Component({\n  selector: 'app-item-detail',\n  template: `\n    <h2>Item Details<\/h2>\n    <div *ngIf="itemDetails">\n      <p><strong>ID:<\/strong> {{ itemDetails.id }}<\/p>\n      <p><strong>Name:<\/strong> {{ itemDetails.name }}<\/p>\n      <p><strong>Description:<\/strong> {{ itemDetails.description }}<\/p>\n      <!-- Display other properties as needed -->\n    <\/div>\n  `,\n})\nexport class ItemDetailComponent implements OnInit {\n  itemDetails?: ItemDetails;\n  itemId = 1; \/\/ Example id; in a real app, this might come from route parameters or user input.\n\n  constructor(private dataService: DataService) {}\n\n  ngOnInit() {\n    this.dataService.getItemDetails(this.itemId).subscribe(\n      (data) => {\n        this.itemDetails = data;\n      },\n      (error) => {\n        console.error('Error fetching item details:', error);\n      }\n    );\n  }\n}\n<\/pre><\/div>\n\n\n
    \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 17<\/strong><\/p>\n\n\n\n
    data.service.ts<\/p>\n\n\n
    \nimport { Injectable } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\nimport { ItemDetails } from '.\/item-details.model';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DataService {\n  private apiUrl = 'https:\/\/api.example.com\/item-details';\n\n  constructor(private http: HttpClient) {}\n\n  getItemDetails(id: number) {\n    const body = { id: id };\n    return this.http.post<ItemDetails>(this.apiUrl, body);\n  }\n}\n<\/pre><\/div>\n\n\n
    item-detail.component.ts<\/p>\n\n\n
    \nimport { Component, signal, effect } from '@angular\/core';\nimport { DataService } from '..\/data.service';\nimport { ItemDetails } from '..\/item-details.model';\nimport { toSignal } from '@angular\/core\/rxjs-interop';\n\n@Component({\n  selector: 'app-item-detail',\n  template: `\n    <h2>Item Details<\/h2>\n    <div *ngIf="itemDetails()">\n      <p><strong>ID:<\/strong> {{ itemDetails().id }}<\/p>\n      <p><strong>Name:<\/strong> {{ itemDetails().name }}<\/p>\n      <p><strong>Description:<\/strong> {{ itemDetails().description }}<\/p>\n    <\/div>\n  `,\n})\nexport class ItemDetailComponent {\n  itemId = signal<number>(1); \/\/ Signal holding the ID\n  itemDetails = signal<ItemDetails | null>(null); \/\/ Signal for item details\n\n  constructor(private dataService: DataService) {\n    effect(() => {\n      const id = this.itemId();\n      if (id) {\n        \/\/ Fetch data when itemId changes\n        const itemDetails$ = this.dataService.getItemDetails(id);\n        const itemDetailsSignal = toSignal(itemDetails$, { initialValue: null });\n        this.itemDetails.set(itemDetailsSignal());\n      }\n    });\n  }\n}\n<\/pre><\/div>\n\n\n
    Reactive Form Validation<\/h3>\n\n\n\n
    \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15<\/strong><\/p>\n\n\n\n
    form.component.ts<\/p>\n\n\n
    \nimport { Component, OnInit } from '@angular\/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular\/forms';\nimport { debounceTime } from 'rxjs\/operators';\n\n@Component({\n  selector: 'app-form',\n  template: `\n    <form [formGroup]="myForm">\n      <input formControlName="name" placeholder="Enter your name" \/>\n      <div *ngIf="nameError">{{ nameError }}<\/div>\n    <\/form>\n  `,\n})\nexport class FormComponent implements OnInit {\n  myForm: FormGroup;\n  nameError: string = '';\n\n  constructor(private fb: FormBuilder) {\n    this.myForm = this.fb.group({\n      name: ['', Validators.required],\n    });\n  }\n\n  ngOnInit() {\n    this.myForm\n      .get('name')\n      ?.valueChanges.pipe(debounceTime(300))\n      .subscribe((value) => {\n        if (value.length < 3) {\n          this.nameError = 'Name must be at least 3 characters';\n        } else {\n          this.nameError = '';\n        }\n      });\n  }\n}\n<\/pre><\/div>\n\n\n
    \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 17<\/strong><\/p>\n\n\n\n
    form.component.ts<\/p>\n\n\n
    \nimport { Component, signal, effect } from '@angular\/core';\nimport { FormControl } from '@angular\/forms';\n\n@Component({\n  selector: 'app-form',\n  template: `\n    <form>\n      <input [formControl]="nameControl" placeholder="Enter your name" \/>\n      <div *ngIf="nameError()">{{ nameError() }}<\/div>\n    <\/form>\n  `,\n})\nexport class FormComponent {\n  nameControl = new FormControl('');\n  nameError = signal<string>('');\n\n  constructor() {\n    effect(() => {\n      const value = this.nameControl.value;\n      if (value.length < 3) {\n        this.nameError.set('Name must be at least 3 characters');\n      } else {\n        this.nameError.set('');\n      }\n    });\n  }\n}\n<\/pre><\/div>\n\n\n
    Shared State Across Components<\/h3>\n\n\n\n
    \u05e9\u05d9\u05ea\u05d5\u05e3 \u05de\u05d9\u05d3\u05e2 \u05d1\u05d9\u05df \u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05d5\u05ea.<\/p>\n\n\n\n
    \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15<\/strong> – \u05e9\u05d9\u05de\u05d5\u05e9 \u05d1-RxJS BehaviorSubject<\/p>\n\n\n\n
    counter.service.ts<\/p>\n\n\n
    \nimport { Injectable } from '@angular\/core';\nimport { BehaviorSubject } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class CounterService {\n  private _counter = new BehaviorSubject<number>(0);\n  counter$ = this._counter.asObservable();\n\n  increment() {\n    this._counter.next(this._counter.value + 1);\n  }\n}\n<\/pre><\/div>\n\n\n
    Component A: counter-display.component.ts<\/strong><\/p>\n\n\n
    \nimport { Component, OnInit } from '@angular\/core';\nimport { CounterService } from '..\/counter.service';\n\n@Component({\n  selector: 'app-counter-display',\n  template: `<p>Counter: {{ counter }}<\/p>`,\n})\nexport class CounterDisplayComponent implements OnInit {\n  counter: number = 0;\n\n  constructor(private counterService: CounterService) {}\n\n  ngOnInit() {\n    this.counterService.counter$.subscribe((value) => (this.counter = value));\n  }\n}\n<\/pre><\/div>\n\n\n
    Component B: counter-button.component.ts<\/strong><\/p>\n\n\n
    \nimport { Component } from '@angular\/core';\nimport { CounterService } from '..\/counter.service';\n\n@Component({\n  selector: 'app-counter-button',\n  template: `<button (click)="increment()">Increment<\/button>`,\n})\nexport class CounterButtonComponent {\n  constructor(private counterService: CounterService) {}\n\n  increment() {\n    this.counterService.increment();\n  }\n}\n<\/pre><\/div>\n\n\n
    \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 17<\/strong> – \u05e9\u05d9\u05de\u05d5\u05e9 \u05d1-Signals<\/p>\n\n\n\n
    counter.service.ts<\/strong><\/p>\n\n\n
    \nimport { Injectable, signal } from '@angular\/core';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class CounterService {\n  counter = signal<number>(0);\n\n  increment() {\n    this.counter.update((value) => value + 1);\n  }\n}\n<\/pre><\/div>\n\n\n
    Component A: counter-display.component.ts<\/strong><\/p>\n\n\n
    \nimport { Component } from '@angular\/core';\nimport { CounterService } from '..\/counter.service';\n\n@Component({\n  selector: 'app-counter-display',\n  template: `<p>Counter: {{ counter() }}<\/p>`,\n})\nexport class CounterDisplayComponent {\n  counter = this.counterService.counter;\n\n  constructor(private counterService: CounterService) {}\n}\n<\/pre><\/div>\n\n\n
    Component B: counter-button.component.ts<\/strong><\/p>\n\n\n
    \nimport { Component } from '@angular\/core';\nimport { CounterService } from '..\/counter.service';\n\n@Component({\n  selector: 'app-counter-button',\n  template: `<button (click)="increment()">Increment<\/button>`,\n})\nexport class CounterButtonComponent {\n  constructor(private counterService: CounterService) {}\n\n  increment() {\n    this.counterService.increment();\n  }\n}\n<\/pre><\/div>\n\n\n
    \u05de\u05e7\u05e8\u05d9\u05dd \u05e9\u05d1\u05d4\u05dd \u05e2\u05d3\u05d9\u05e3 \u05dc\u05d4\u05e9\u05ea\u05de\u05e9 \u05d1-RxJS<\/h3>\n\n\n\n
    \u05e7\u05e8\u05d9\u05d0\u05d4 \u05de\u05e8\u05d5\u05d1\u05d4 \u05dc\u05de\u05d9\u05d3\u05e2 \u05d0-\u05e1\u05d9\u05e0\u05db\u05e8\u05d5\u05e0\u05d9 \u05d0\u05d5 \u05e6\u05d5\u05e8\u05da \u05d1\u05d8\u05e8\u05e0\u05e1\u05e4\u05d5\u05e8\u05de\u05e6\u05d9\u05d4 \u05de\u05d5\u05e8\u05db\u05d1\u05ea \u05dc\u05de\u05d9\u05d3\u05e2 \u05e9\u05de\u05ea\u05e7\u05d1\u05dc \u05de\u05d4-API.<\/p>\n\n\n
    \n\/\/ data.service.ts (Angular 17)\nimport { Injectable } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\nimport { Observable, forkJoin } from 'rxjs';\nimport { map } from 'rxjs\/operators';\n\nexport interface User {\n  id: number;\n  name: string;\n}\n\nexport interface Orders {\n  userId: number;\n  orders: Order[];\n}\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DataService {\n  constructor(private http: HttpClient) {}\n\n  getUserWithOrders(userId: number): Observable<{ user: User; orders: Orders }> {\n    return forkJoin({\n      user: this.http.get<User>(`\/api\/users\/${userId}`),\n      orders: this.http.get<Orders>(`\/api\/orders?userId=${userId}`),\n    });\n  }\n}\n<\/pre><\/div>\n\n\n
    \u05e6\u05d5\u05e8\u05da \u05d1\u05e2\u05d9\u05d1\u05d5\u05d3 \u05de\u05d4\u05d9\u05e8 \u05e9\u05dc \u05de\u05d9\u05d3\u05e2 \u05e9\u05de\u05d2\u05d9\u05e2 \u05de\u05d4\u05e7\u05dc\u05d8 \u05db\u05de\u05d5 \u05dc\u05de\u05e9\u05dc \u05d1\u05d7\u05d9\u05e4\u05d5\u05e9 \u05e2\u05dc \u05e4\u05d9 \u05e7\u05dc\u05d8 \u05d4\u05de\u05e9\u05ea\u05de\u05e9 \u05d5\u05e9\u05d9\u05de\u05d5\u05e9 \u05d1\u05d4\u05e9\u05d4\u05d9\u05d9\u05d4 \u05e2\u05dc \u05de\u05e0\u05ea \u05dc\u05d0\u05de\u05ea \u05e7\u05dc\u05d8.<\/p>\n\n\n
    \nimport { Component } from '@angular\/core';\nimport { FormControl } from '@angular\/forms';\nimport { Observable } from 'rxjs';\nimport { debounceTime, distinctUntilChanged, switchMap } from 'rxjs\/operators';\nimport { SearchService } from '..\/search.service';\n\n@Component({\n  selector: 'app-search',\n  template: `\n    <input type="text" [formControl]="searchControl" placeholder="Search..." \/>\n    <ul>\n      <li *ngFor="let item of results$ | async">{{ item.name }}<\/li>\n    <\/ul>\n  `,\n})\nexport class SearchComponent {\n  searchControl = new FormControl('');\n  results$: Observable<SearchResult[]>;\n\n  constructor(private searchService: SearchService) {\n    this.results$ = this.searchControl.valueChanges.pipe(\n      debounceTime(300),\n      distinctUntilChanged(),\n      switchMap((term) => this.searchService.search(term))\n    );\n  }\n}\n<\/pre><\/div>\n\n\n
    \u05ea\u05e4\u05d9\u05e1\u05ea \u05e9\u05d2\u05d9\u05d0\u05d5\u05ea \u05de\u05d5\u05e8\u05db\u05d1\u05ea \u05d5\u05d4\u05e4\u05e2\u05dc\u05d4 \u05e9\u05dc \u05dc\u05d5\u05d2\u05d9\u05e7\u05d4 \u05d1\u05ea\u05d5\u05da \u05ea\u05e4\u05d9\u05e1\u05ea \u05d4\u05e9\u05d2\u05d9\u05d0\u05d5\u05ea.<\/p>\n\n\n
    \nimport { Injectable } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\nimport { Observable, throwError, timer } from 'rxjs';\nimport { retryWhen, mergeMap } from 'rxjs\/operators';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DataService {\n  constructor(private http: HttpClient) {}\n\n  getData(): Observable<Data> {\n    return this.http.get<Data>('\/api\/data').pipe(\n      retryWhen((errors) =>\n        errors.pipe(\n          mergeMap((error, i) => {\n            if (i >= 3) {\n              return throwError(error);\n            }\n            return timer(1000 * (i + 1));\n          })\n        )\n      )\n    );\n  }\n}\n<\/pre><\/div>\n\n\n
    \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d5\u05e0\u05dc\u05d9\u05d5\u05ea \u05de\u05d5\u05e8\u05db\u05d1\u05ea \u05d1\u05ea\u05e4\u05d9\u05e1\u05ea events. \u05d1\u05d3\u05d5\u05d2\u05de\u05d0 \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d5\u05e0\u05dc\u05d9\u05d5\u05ea \u05e9\u05dc drop-down.<\/p>\n\n\n
    \nimport { Directive, ElementRef, OnInit } from '@angular\/core';\nimport { fromEvent } from 'rxjs';\nimport { switchMap, takeUntil, pairwise } from 'rxjs\/operators';\n\n@Directive({\n  selector: '[appDraggable]',\n})\nexport class DraggableDirective implements OnInit {\n  constructor(private element: ElementRef) {}\n\n  ngOnInit() {\n    const mouseDown$ = fromEvent<MouseEvent>(this.element.nativeElement, 'mousedown');\n    const mouseMove$ = fromEvent<MouseEvent>(document, 'mousemove');\n    const mouseUp$ = fromEvent<MouseEvent>(document, 'mouseup');\n\n    mouseDown$\n      .pipe(\n        switchMap(() =>\n          mouseMove$.pipe(\n            takeUntil(mouseUp$),\n            pairwise()\n          )\n        )\n      )\n      .subscribe(([prev, curr]) => {\n        const deltaX = curr.clientX - prev.clientX;\n        const deltaY = curr.clientY - prev.clientY;\n        \/\/ Update element position\n        const element = this.element.nativeElement;\n        element.style.left = element.offsetLeft + deltaX + 'px';\n        element.style.top = element.offsetTop + deltaY + 'px';\n      });\n  }\n}\n<\/pre><\/div>\n\n\n
    \u05e9\u05d9\u05de\u05d5\u05e9 \u05d1\u05d0\u05d5\u05e4\u05e8\u05d8\u05d5\u05e8\u05d9\u05dd \u05de\u05d5\u05e8\u05db\u05d1\u05d9\u05dd.<\/p>\n\n\n
    \nimport { Observable, timer, throwError } from 'rxjs';\nimport { mergeMap } from 'rxjs\/operators';\n\nexport function retryWithDelay(retryCount: number, delayMs: number) {\n  return (src: Observable<any>) =>\n    src.pipe(\n      retryWhen((errors) =>\n        errors.pipe(\n          mergeMap((error, i) => {\n            if (i >= retryCount) {\n              return throwError(error);\n            }\n            return timer(delayMs);\n          })\n        )\n      )\n    );\n}\n<\/pre><\/div>\n\n\n
    \u05d4\u05de\u05e8\u05d4 \u05d1\u05d9\u05df Observables \u05dc-Signals.<\/p>\n\n\n
    \nimport { Component } from '@angular\/core';\nimport { interval } from 'rxjs';\nimport { toSignal } from '@angular\/core\/rxjs-interop';\n\n@Component({\n  selector: 'app-timer',\n  template: `<p>Seconds elapsed: {{ secondsElapsed() }}<\/p>`,\n})\nexport class TimerComponent {\n  secondsElapsed = toSignal(interval(1000));\n}\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"
    \u05db\u05d9\u05d5\u05dd (22.10.24) \u05d4\u05d2\u05e8\u05e1\u05d4 \u05d4\u05e2\u05d3\u05db\u05e0\u05d9\u05ea \u05e9\u05dc \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 \u05d4\u05d9\u05d0 18. \u05de\u05db\u05d9\u05d5\u05d5\u05df \u05e9\u05e2\u05d3 \u05e2\u05db\u05e9\u05d9\u05d5 \u05db\u05ea\u05d1\u05ea\u05d9 \u05d1\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15, \u05d0\u05db\u05ea\u05d5\u05d1 \u05e2\u05dc \u05d4\u05de\u05e2\u05d1\u05e8 \u05d5\u05de\u05d4 \u05e9\u05d5\u05e0\u05d4 \u05d1\u05d2\u05e8\u05e1\u05d0\u05d5\u05ea \u05e9\u05e2\u05d1\u05e8\u05d5 \u05e2\u05d3 \u05e2\u05db\u05e9\u05d9\u05d5. \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 16 Standalone Components by Default \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15 – standalone components \u05d4\u05d9\u05d5 \u05d6\u05de\u05d9\u05e0\u05d9\u05dd, \u05d0\u05d1\u05dc \u05dc\u05d0 \u05db\u05d1\u05e8\u05d9\u05e8\u05ea \u05de\u05d7\u05d3\u05dc. \u05e2\u05d3\u05d9\u05d9\u05df \u05d4\u05d9\u05d4 \u05d7\u05d9\u05d9\u05d1 \u05dc\u05d4\u05d9\u05d5\u05ea \u05de\u05d5\u05d3\u05d5\u05dc \u05d0\u05d7\u05d3 \u05dc\u05e4\u05d7\u05d5\u05ea. \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 16 – standalone components \u05e0\u05d5\u05e6\u05e8\u05d9\u05dd \u05db\u05d1\u05e8\u05d9\u05e8\u05ea \u05de\u05d7\u05d3\u05dc. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[29],"tags":[],"class_list":["post-1908","post","type-post","status-publish","format-standard","hentry","category-angular-docs","entry"],"yoast_head":"\n\u05de\u05e2\u05d1\u05e8 \u05de\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15 \u05dc\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 18 - Code Notebook<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/epicmarketing.co.il\/notebook\/whats-new-in-angular-16-17-18\/\" \/>\n<meta property=\"og:locale\" content=\"he_IL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u05de\u05e2\u05d1\u05e8 \u05de\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15 \u05dc\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 18 - Code Notebook\" \/>\n<meta property=\"og:description\" content=\"\u05db\u05d9\u05d5\u05dd (22.10.24) \u05d4\u05d2\u05e8\u05e1\u05d4 \u05d4\u05e2\u05d3\u05db\u05e0\u05d9\u05ea \u05e9\u05dc \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 \u05d4\u05d9\u05d0 18. \u05de\u05db\u05d9\u05d5\u05d5\u05df \u05e9\u05e2\u05d3 \u05e2\u05db\u05e9\u05d9\u05d5 \u05db\u05ea\u05d1\u05ea\u05d9 \u05d1\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15, \u05d0\u05db\u05ea\u05d5\u05d1 \u05e2\u05dc \u05d4\u05de\u05e2\u05d1\u05e8 \u05d5\u05de\u05d4 \u05e9\u05d5\u05e0\u05d4 \u05d1\u05d2\u05e8\u05e1\u05d0\u05d5\u05ea \u05e9\u05e2\u05d1\u05e8\u05d5 \u05e2\u05d3 \u05e2\u05db\u05e9\u05d9\u05d5. \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 16 Standalone Components by Default \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15 – standalone components \u05d4\u05d9\u05d5 \u05d6\u05de\u05d9\u05e0\u05d9\u05dd, \u05d0\u05d1\u05dc \u05dc\u05d0 \u05db\u05d1\u05e8\u05d9\u05e8\u05ea \u05de\u05d7\u05d3\u05dc. \u05e2\u05d3\u05d9\u05d9\u05df \u05d4\u05d9\u05d4 \u05d7\u05d9\u05d9\u05d1 \u05dc\u05d4\u05d9\u05d5\u05ea \u05de\u05d5\u05d3\u05d5\u05dc \u05d0\u05d7\u05d3 \u05dc\u05e4\u05d7\u05d5\u05ea. \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 16 – standalone components \u05e0\u05d5\u05e6\u05e8\u05d9\u05dd \u05db\u05d1\u05e8\u05d9\u05e8\u05ea \u05de\u05d7\u05d3\u05dc. […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/epicmarketing.co.il\/notebook\/whats-new-in-angular-16-17-18\/\" \/>\n<meta property=\"og:site_name\" content=\"Code Notebook\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-22T19:21:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-24T12:12:50+00:00\" \/>\n<meta name=\"author\" content=\"kerendanino\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u05e0\u05db\u05ea\u05d1 \u05e2\u05dc \u05d9\u05d3\" \/>\n\t<meta name=\"twitter:data1\" content=\"kerendanino\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u05d6\u05de\u05df \u05e7\u05e8\u05d9\u05d0\u05d4 \u05de\u05d5\u05e2\u05e8\u05da\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 \u05d3\u05e7\u05d5\u05ea\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/whats-new-in-angular-16-17-18\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/whats-new-in-angular-16-17-18\\\/\"},\"author\":{\"name\":\"kerendanino\",\"@id\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/#\\\/schema\\\/person\\\/195dfc625818eadda7903d456890e24c\"},\"headline\":\"\u05de\u05e2\u05d1\u05e8 \u05de\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15 \u05dc\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 18\",\"datePublished\":\"2024-10-22T19:21:46+00:00\",\"dateModified\":\"2024-12-24T12:12:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/whats-new-in-angular-16-17-18\\\/\"},\"wordCount\":258,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/#organization\"},\"articleSection\":[\"Angular Documentation\"],\"inLanguage\":\"he-IL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/whats-new-in-angular-16-17-18\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/whats-new-in-angular-16-17-18\\\/\",\"url\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/whats-new-in-angular-16-17-18\\\/\",\"name\":\"\u05de\u05e2\u05d1\u05e8 \u05de\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15 \u05dc\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 18 - Code Notebook\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/#website\"},\"datePublished\":\"2024-10-22T19:21:46+00:00\",\"dateModified\":\"2024-12-24T12:12:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/whats-new-in-angular-16-17-18\\\/#breadcrumb\"},\"inLanguage\":\"he-IL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/whats-new-in-angular-16-17-18\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/whats-new-in-angular-16-17-18\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u05de\u05e2\u05d1\u05e8 \u05de\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15 \u05dc\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 18\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/#website\",\"url\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/\",\"name\":\"Code Notebook\",\"description\":\"Easy coding\",\"publisher\":{\"@id\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"he-IL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/#organization\",\"name\":\"Code Notebook\",\"url\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"he-IL\",\"@id\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo-epic-marketing-05.png\",\"contentUrl\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo-epic-marketing-05.png\",\"width\":3626,\"height\":1942,\"caption\":\"Code Notebook\"},\"image\":{\"@id\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/#\\\/schema\\\/person\\\/195dfc625818eadda7903d456890e24c\",\"name\":\"kerendanino\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"he-IL\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/285cc9389c66aa46da1e26a474b1e90e9efaf3fa21f1b928cbd63ce5f0e89c63?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/285cc9389c66aa46da1e26a474b1e90e9efaf3fa21f1b928cbd63ce5f0e89c63?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/285cc9389c66aa46da1e26a474b1e90e9efaf3fa21f1b928cbd63ce5f0e89c63?s=96&d=mm&r=g\",\"caption\":\"kerendanino\"},\"url\":\"https:\\\/\\\/epicmarketing.co.il\\\/notebook\\\/author\\\/kerendanino\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u05de\u05e2\u05d1\u05e8 \u05de\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15 \u05dc\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 18 - Code Notebook","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/epicmarketing.co.il\/notebook\/whats-new-in-angular-16-17-18\/","og_locale":"he_IL","og_type":"article","og_title":"\u05de\u05e2\u05d1\u05e8 \u05de\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15 \u05dc\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 18 - Code Notebook","og_description":"\u05db\u05d9\u05d5\u05dd (22.10.24) \u05d4\u05d2\u05e8\u05e1\u05d4 \u05d4\u05e2\u05d3\u05db\u05e0\u05d9\u05ea \u05e9\u05dc \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 \u05d4\u05d9\u05d0 18. \u05de\u05db\u05d9\u05d5\u05d5\u05df \u05e9\u05e2\u05d3 \u05e2\u05db\u05e9\u05d9\u05d5 \u05db\u05ea\u05d1\u05ea\u05d9 \u05d1\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15, \u05d0\u05db\u05ea\u05d5\u05d1 \u05e2\u05dc \u05d4\u05de\u05e2\u05d1\u05e8 \u05d5\u05de\u05d4 \u05e9\u05d5\u05e0\u05d4 \u05d1\u05d2\u05e8\u05e1\u05d0\u05d5\u05ea \u05e9\u05e2\u05d1\u05e8\u05d5 \u05e2\u05d3 \u05e2\u05db\u05e9\u05d9\u05d5. \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 16 Standalone Components by Default \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15 – standalone components \u05d4\u05d9\u05d5 \u05d6\u05de\u05d9\u05e0\u05d9\u05dd, \u05d0\u05d1\u05dc \u05dc\u05d0 \u05db\u05d1\u05e8\u05d9\u05e8\u05ea \u05de\u05d7\u05d3\u05dc. \u05e2\u05d3\u05d9\u05d9\u05df \u05d4\u05d9\u05d4 \u05d7\u05d9\u05d9\u05d1 \u05dc\u05d4\u05d9\u05d5\u05ea \u05de\u05d5\u05d3\u05d5\u05dc \u05d0\u05d7\u05d3 \u05dc\u05e4\u05d7\u05d5\u05ea. \u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 16 – standalone components \u05e0\u05d5\u05e6\u05e8\u05d9\u05dd \u05db\u05d1\u05e8\u05d9\u05e8\u05ea \u05de\u05d7\u05d3\u05dc. […]","og_url":"https:\/\/epicmarketing.co.il\/notebook\/whats-new-in-angular-16-17-18\/","og_site_name":"Code Notebook","article_published_time":"2024-10-22T19:21:46+00:00","article_modified_time":"2024-12-24T12:12:50+00:00","author":"kerendanino","twitter_card":"summary_large_image","twitter_misc":{"\u05e0\u05db\u05ea\u05d1 \u05e2\u05dc \u05d9\u05d3":"kerendanino","\u05d6\u05de\u05df \u05e7\u05e8\u05d9\u05d0\u05d4 \u05de\u05d5\u05e2\u05e8\u05da":"4 \u05d3\u05e7\u05d5\u05ea"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/epicmarketing.co.il\/notebook\/whats-new-in-angular-16-17-18\/#article","isPartOf":{"@id":"https:\/\/epicmarketing.co.il\/notebook\/whats-new-in-angular-16-17-18\/"},"author":{"name":"kerendanino","@id":"https:\/\/epicmarketing.co.il\/notebook\/#\/schema\/person\/195dfc625818eadda7903d456890e24c"},"headline":"\u05de\u05e2\u05d1\u05e8 \u05de\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15 \u05dc\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 18","datePublished":"2024-10-22T19:21:46+00:00","dateModified":"2024-12-24T12:12:50+00:00","mainEntityOfPage":{"@id":"https:\/\/epicmarketing.co.il\/notebook\/whats-new-in-angular-16-17-18\/"},"wordCount":258,"commentCount":0,"publisher":{"@id":"https:\/\/epicmarketing.co.il\/notebook\/#organization"},"articleSection":["Angular Documentation"],"inLanguage":"he-IL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/epicmarketing.co.il\/notebook\/whats-new-in-angular-16-17-18\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/epicmarketing.co.il\/notebook\/whats-new-in-angular-16-17-18\/","url":"https:\/\/epicmarketing.co.il\/notebook\/whats-new-in-angular-16-17-18\/","name":"\u05de\u05e2\u05d1\u05e8 \u05de\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15 \u05dc\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 18 - Code Notebook","isPartOf":{"@id":"https:\/\/epicmarketing.co.il\/notebook\/#website"},"datePublished":"2024-10-22T19:21:46+00:00","dateModified":"2024-12-24T12:12:50+00:00","breadcrumb":{"@id":"https:\/\/epicmarketing.co.il\/notebook\/whats-new-in-angular-16-17-18\/#breadcrumb"},"inLanguage":"he-IL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/epicmarketing.co.il\/notebook\/whats-new-in-angular-16-17-18\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/epicmarketing.co.il\/notebook\/whats-new-in-angular-16-17-18\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/epicmarketing.co.il\/notebook\/"},{"@type":"ListItem","position":2,"name":"\u05de\u05e2\u05d1\u05e8 \u05de\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 15 \u05dc\u05d0\u05e0\u05d2\u05d5\u05dc\u05e8 18"}]},{"@type":"WebSite","@id":"https:\/\/epicmarketing.co.il\/notebook\/#website","url":"https:\/\/epicmarketing.co.il\/notebook\/","name":"Code Notebook","description":"Easy coding","publisher":{"@id":"https:\/\/epicmarketing.co.il\/notebook\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/epicmarketing.co.il\/notebook\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"he-IL"},{"@type":"Organization","@id":"https:\/\/epicmarketing.co.il\/notebook\/#organization","name":"Code Notebook","url":"https:\/\/epicmarketing.co.il\/notebook\/","logo":{"@type":"ImageObject","inLanguage":"he-IL","@id":"https:\/\/epicmarketing.co.il\/notebook\/#\/schema\/logo\/image\/","url":"https:\/\/epicmarketing.co.il\/notebook\/wp-content\/uploads\/2023\/07\/logo-epic-marketing-05.png","contentUrl":"https:\/\/epicmarketing.co.il\/notebook\/wp-content\/uploads\/2023\/07\/logo-epic-marketing-05.png","width":3626,"height":1942,"caption":"Code Notebook"},"image":{"@id":"https:\/\/epicmarketing.co.il\/notebook\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/epicmarketing.co.il\/notebook\/#\/schema\/person\/195dfc625818eadda7903d456890e24c","name":"kerendanino","image":{"@type":"ImageObject","inLanguage":"he-IL","@id":"https:\/\/secure.gravatar.com\/avatar\/285cc9389c66aa46da1e26a474b1e90e9efaf3fa21f1b928cbd63ce5f0e89c63?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/285cc9389c66aa46da1e26a474b1e90e9efaf3fa21f1b928cbd63ce5f0e89c63?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/285cc9389c66aa46da1e26a474b1e90e9efaf3fa21f1b928cbd63ce5f0e89c63?s=96&d=mm&r=g","caption":"kerendanino"},"url":"https:\/\/epicmarketing.co.il\/notebook\/author\/kerendanino\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/epicmarketing.co.il\/notebook\/wp-json\/wp\/v2\/posts\/1908","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/epicmarketing.co.il\/notebook\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/epicmarketing.co.il\/notebook\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/epicmarketing.co.il\/notebook\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/epicmarketing.co.il\/notebook\/wp-json\/wp\/v2\/comments?post=1908"}],"version-history":[{"count":12,"href":"https:\/\/epicmarketing.co.il\/notebook\/wp-json\/wp\/v2\/posts\/1908\/revisions"}],"predecessor-version":[{"id":2125,"href":"https:\/\/epicmarketing.co.il\/notebook\/wp-json\/wp\/v2\/posts\/1908\/revisions\/2125"}],"wp:attachment":[{"href":"https:\/\/epicmarketing.co.il\/notebook\/wp-json\/wp\/v2\/media?parent=1908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/epicmarketing.co.il\/notebook\/wp-json\/wp\/v2\/categories?post=1908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/epicmarketing.co.il\/notebook\/wp-json\/wp\/v2\/tags?post=1908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}