מדריך angular standalone component חלק 2

C:\my-standalone-project\src\app\pages>ng g c about

import { Routes } from '@angular/router';

export const routes: Routes = [
    {
        path: '', loadComponent: () => import('./pages/home/home.component').then(p => p.HomeComponent)
    },
    {
        path: 'about', loadComponent: () => import('./pages/about/about.component').then(p => p.AboutComponent)
    }
];

<h1>home works!</h1>
<a routerLink="about">About</a>

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [RouterModule], // added
  templateUrl: './home.component.html',
  styleUrl: './home.component.scss'
})
export class HomeComponent {

}

<h1>about works!</h1>
<a routerLink="/">Home</a>

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-about',
  standalone: true,
  imports: [RouterModule], // added
  templateUrl: './about.component.html',
  styleUrl: './about.component.scss'
})
export class AboutComponent {

}

<router-outlet></router-outlet>

C:\my-standalone-project\src\app\components>ng g c name-input
C:\my-standalone-project\src\app\components>ng g c show-name

<div class="name-input">
    <h2>Who am I?</h2>
    <form [formGroup]="form">
        <label>
            <span>Full name</span>
            <input type="text" formControlName="fullName">
        </label>
        <button type="button" (click)="onSaveName()">Save</button>
    </form>
</div>

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-name-input',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './name-input.component.html',
  styleUrl: './name-input.component.scss'
})
export class NameInputComponent implements OnInit {
  form: FormGroup = new FormGroup({});
  constructor() { }
  ngOnInit(): void {
    this.form = new FormGroup({
      fullName: new FormControl('')
    })
  }
  onSaveName() {
    console.log(this.form.value);
  }
}

<h1>home works!</h1>
<a routerLink="about">About</a>
<div>
    <app-name-input></app-name-input>
</div>

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NameInputComponent } from '../../components/name-input/name-input.component';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [RouterModule, NameInputComponent], // added
  templateUrl: './home.component.html',
  styleUrl: './home.component.scss'
})
export class HomeComponent {

}

<div class="show-name">
    <h2>My name is.... {{fullName}}</h2>
</div>

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

@Component({
  selector: 'app-show-name',
  standalone: true,
  imports: [],
  templateUrl: './show-name.component.html',
  styleUrl: './show-name.component.scss'
})
export class ShowNameComponent {
  fullName: string = '';
}

<h1>about works!</h1>
<a routerLink="/">Home</a>
<div>
    <app-show-name></app-show-name>
</div>

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ShowNameComponent } from '../../components/show-name/show-name.component';

@Component({
  selector: 'app-about',
  standalone: true,
  imports: [RouterModule,ShowNameComponent],
  templateUrl: './about.component.html',
  styleUrl: './about.component.scss'
})
export class AboutComponent {

}

C:\my-standalone-project\src\app\services>ng g s information

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

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

  private fullNameInfo = new BehaviorSubject('');
  public fullNameInfo$ = this.fullNameInfo.asObservable();

  constructor() { }

  setFullNameInfo(data: string) {
    this.fullNameInfo.next(data);
  }

}

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { InformationService } from '../../services/information.service';

@Component({
  selector: 'app-name-input',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './name-input.component.html',
  styleUrl: './name-input.component.scss'
})
export class NameInputComponent implements OnInit {
  form: FormGroup = new FormGroup({});
  constructor(private informationService: InformationService) { }
  ngOnInit(): void {
    this.form = new FormGroup({
      fullName: new FormControl('')
    })
  }
  onSaveName() {
    this.informationService.setFullNameInfo(this.form.value.fullName);
  }
}

import { Component, OnInit } from '@angular/core';
import { InformationService } from '../../services/information.service';

@Component({
  selector: 'app-show-name',
  standalone: true,
  imports: [],
  templateUrl: './show-name.component.html',
  styleUrl: './show-name.component.scss'
})
export class ShowNameComponent implements OnInit {
  fullName: string = '';
  constructor(private informationService: InformationService) { }
  ngOnInit(): void {
    this.informationService.fullNameInfo$.subscribe(info => {
      this.fullName = info
    })
  }
}

import { Component, OnDestroy, OnInit } from '@angular/core';
import { InformationService } from '../../services/information.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-show-name',
  standalone: true,
  imports: [],
  templateUrl: './show-name.component.html',
  styleUrl: './show-name.component.scss'
})
export class ShowNameComponent implements OnInit, OnDestroy {
  fullName: string = '';
  info$ = new Subscription;
  constructor(private informationService: InformationService) { }
  ngOnInit(): void {
    this.info$ = this.informationService.fullNameInfo$.subscribe(info => {
      this.fullName = info
    })
  }
  ngOnDestroy(): void {
    this.info$.unsubscribe();
  }
}

import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { InformationService } from '../../services/information.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-name-input',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './name-input.component.html',
  styleUrl: './name-input.component.scss'
})
export class NameInputComponent implements OnInit, OnDestroy {
  form: FormGroup = new FormGroup({});
  info$ = new Subscription;
  fullname: string = '';
  constructor(private informationService: InformationService) { }
  ngOnInit(): void {
    this.info$ = this.informationService.fullNameInfo$.subscribe(info => {
      this.fullname = info;
    })
    this.form = new FormGroup({
      fullName: new FormControl(this.fullname)
    })
  }
  onSaveName() {
    this.informationService.setFullNameInfo(this.form.value.fullName);
  }
  ngOnDestroy(): void {
    this.info$.unsubscribe();
  }
}

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

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

  private fullNameInfo = new BehaviorSubject('');
  public fullNameInfo$ = this.fullNameInfo.asObservable();

  constructor(private http: HttpClient) { }

  setFullNameInfo(data: string) {
    this.fullNameInfo.next(data);
  }
  updateDB() {
    this.http.post('/', '').subscribe(data => {

    })
  }
}

ERROR NullInjectorError: R3InjectorError(Standalone[_HomeComponent])[_InformationService -> _InformationService -> _InformationService -> _HttpClient -> _HttpClient]: 
  NullInjectorError: No provider for _HttpClient!

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideHttpClient()]
};