TECNOLOBO

No recuerdas tu codigo?
Se te olvido como se hace?

Aqui podras guardar lo que necesiten
Y cuando sea necesesario

Creado por julian gomez
iiiiii

Parametros entre componentes



Descripcion

Como enviar parametros entre componentes

Notas


1.	Se va crear un Incrementador, lo cual solo suma 5 o resta 5 a una variable que ingresamos al compoenete
	La variable usada para Dato de entrada es llamada "valor"
	La variable(Evento) para regresa el valor se llama "valorSalida" que en si es una EVENTO
	

						

component_js



import { Component, EventEmitter, Input, Output,OnInit } from '@angular/core';


@Component({
  selector: 'app-incrementador',
  templateUrl: './incrementador.component.html',
  styleUrls: ['./incrementador.component.css']
})
export class IncrementadorComponent implements OnInit {

  ngOnInit(): void {
    this.classbtn = `btn ${this.classbtn}`;
  }

  @Input('valor') progreso:number = 50;//15
  @Input() classbtn:string = 'btn-primary';//15
  

  @Output() valorSalida:EventEmitter<number> = new EventEmitter();
   

  cambiarValor(valor:number){
    // if(this.progreso==0 || this.progreso==100)    return ;
    if(this.progreso >=100 && valor >0){
      this.progreso = 100;
      this.valorSalida.emit(100);
      return ;
    }
    if(this.progreso==0 && valor <0){
      this.progreso=0;
      this.valorSalida.emit(0);
      return;
    }

    this.progreso = this.progreso + valor;
    this.valorSalida.emit(this.progreso);
  }

  onChange(valor:number){

    if(valor>=100){
      this.progreso =100;
    }else if(valor<=0) {
      this.progreso=0;
    }else{
      this.progreso=valor;
    }

    this.valorSalida.emit(this.progreso);
  }


}

						

component_html


<div class="input-group">

  <span class="input-group-btn">
    <button [ngClass]="classbtn" 
            type="button"
            (click)="cambiarValor(-5)">
      <i class="fa fa-minus"></i>
    </button>
  </span>

  <input 
    type="number"
    class="form-control"
    placeholder="progreso"
    [ngClass]="{'is-invalid':progreso>100 || progreso<0}"
    (ngModelChange)="onChange($event)"
    [(ngModel)]="progreso">

  <span class="input-group-btn">
    <button [ngClass]="classbtn" 
      type="button"
      (click)="cambiarValor(5)">
      <i class="fa fa-plus"></i>
    </button>
  </span>

</div>

						

Uso_Implementacion


1. al llamar la etiqueta  "app-incrementador" lo estamos haciendo dentro de un COMPONENTE que aqui no se muestra pero el cual contiene
un script el cual va contener dos variables 
	1.1 progreso1,progreso2. Estas dos variables las va alterar nuestro componente incrementador.
    
2. Aqui al usar podemos enviarle "Valor" como un dato inicial, para que el componente tenga un dato por defecto. en caso que no 
se le envie este tomara un valor "X" ya definido en la logica del COMPONENTE que aqui no se muestra "Pero tu puedes ponerle el que deseas"

<app-incrementador (valorSalida)="progreso1=$event" [valor]="progreso1"></app-incrementador>
<app-incrementador (valorSalida)="progreso2=$event" [valor]="progreso2"></app-incrementador>