سیگنال زاویه ای: مدیریت حالت واکنشی

Nosso Signal: {{exemploSignal()}}


 (click)="executar()">Executar

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  title = 'exemplos';

  protected exemploSignal = signal('angular');

  constructor() {
  }

  executar(){
    this.exemploSignal.set('Framework Angular');
  }
}

Nosso Signal: {{exemploCount()}}


 (click)="executar()">Executar

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  title = 'exemplos';

  protected exemploCount = signal(1);

  constructor() {
  }

  executar(){
    this.exemploCount.update(atual => atual + 1);
  }
}

 class="container">
   (click)="incrementar()">Incrementar
  Contador: {{ contador() }}
   (click)="decrementar()">Decrementar
   (click)="limpar()">Limpar

:host {
  display: block;
}

.container {
  display: flex;
  gap: 10px;
}

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

@Component({
  selector: 'app-contador',
  standalone: true,
  imports: [],
  templateUrl: './contador.component.html',
  styleUrl: './contador.component.css'
})
export class ContadorComponent {
contador = signal(0);

  incrementar(){
    this.contador.update(valor => valor + 1);
  }

  decrementar(){
    this.contador.update(valor => valor - 1);
  }

  limpar(){
    this.contador.set(0);
  }
}

contador = signal(0);

  incrementar(){
    this.contador.update(valor => valor + 1);
  }

  decrementar(){
    this.contador.update(valor => valor - 1);
  }

  Contador: {{ contador() }} 

  contador = signal(0);
  contadorVezesDois: Signal<number> = computed(() => this.contador() * 2);

 class="container">
   (click)="incrementar()">Incrementar
  Contador: {{ contador() }}
   (click)="decrementar()">Decrementar
   (click)="limpar()">Limpar


 class="result">
  Valor do contador vezes 2: {{ contadorVezesDois() }}

:host {
  display: block;
}

.container {
  display: flex;
  gap: 10px;
}

.result{
  margin-top: 10px;
}

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

@Component({
  selector: 'app-contador-v2',
  standalone: true,
  imports: [],
  templateUrl: './contador-v2.component.html',
  styleUrl: './contador-v2.component.css'
})
export class ContadorV2Component {
  contador = signal(0);
  contadorVezesDois: Signal<number> = computed(() => this.contador() * 2);

  incrementar(){
    this.contador.update(valor => valor + 1);
  }

  decrementar(){
    this.contador.update(valor => valor - 1);
  }

  limpar(){
    this.contador.set(0);
  }
}

import { Injectable, signal } from "@angular/core";

@Injectable({ providedIn: 'root' })
export class Store {
  contador = signal(0);

  incrementar(){
    this.contador.update(valor => valor + 1);
  }

  decrementar(){
    this.contador.update(valor => valor - 1);
  }

  limpar(){
    this.contador.set(0);
  }
}

 class="container">
   (click)="store.incrementar()">Incrementar
  Contador: {{ store.contador() }}
   (click)="store.decrementar()">Decrementar
   (click)="store.limpar()">Limpar

:host {
  display: block;
}

.container {
  display: flex;
  gap: 10px;
}

.result{
  margin-top: 10px;
}

import { Component, inject } from '@angular/core';
import { Store } from '../store';

@Component({
  selector: 'app-contador-v3',
  standalone: true,
  imports: [],
  templateUrl: './contador-v3.component.html',
  styleUrl: './contador-v3.component.css'
})
export class ContadorV3Component {
 protected store = inject(Store);
}

import { Component, effect, inject } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ContadorV3Component } from './contador-v3/contador-v3.component';
import { Store } from './store';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    ContadorV3Component,
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  protected store = inject(Store)

  constructor() {
    effect(() => {
      const contador = this.store.contador();
      if(contador < 0) {
        console.log('Negativo')
      }
      else{
      const par = contador % 2 === 0;
      if(par) {
        console.log('Par')
      } else {
        console.log('Impar')
      }
    }
    });
  }
}

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

@Component({
  selector: 'app-on-push-teste',
  standalone: true,
  template: `
    
    
O valor é: {{valor}}
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushTesteComponent {
valor = 1;

constructor(){
  setInterval(() => {
    this.valor++;
    console.log('Mudou o valor: ', this.valor);
  }, 1000);
}
}

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

@Component({
  selector: 'app-on-push-teste',
  standalone: true,
  template: `
    
    
O valor é: {{valor()}}
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushTesteComponent {
valor = signal(1);

constructor(){
  setInterval(() => {
    this.valor.update(valor => valor + 1);
    console.log('Mudou o valor: ', this.valor());
  }, 1000);
}
}

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { OnPushTesteComponent } from './on-push-teste/on-push-teste.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    OnPushTesteComponent
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {

  constructor() {
  }
}