Cacher is the code snippet organizer for pro developers

```typescript
@Input() // Definir propiedades que vienen del padre
@Input() prop: string;
```
```html
<!-- parentProp, puede es una propiedad del padre que su componente hijo podrá utilizar -->
<children-component [prop]="parentProp"><children-component>
```
```typescript
@Output() // eventos que el hijo va a emitir y el padre va a reaccionar en consecuencia
// Children component ts
---
@Output() outputWithParams: EventEmitter<any>: new EventEmitter<any>();
@Output() outputWithoutParams: EventEmitter<void>: new EventEmitter<void>();
callWithParams() { // función que dispara un botón del componente hijo
    this.outputWithParams.emit({ hello: 'world' });
}
callWithoutParams() { // función que dispara otro botón del componente hijo
    this.outputWithoutParams.emit();
}
---
```
### componentepadre
```html
<children-component 
    (outputWithParams)="parentWithParams($event)" // al disparar el componente hijo el emit de outputWithParams, hará que se ejecute la función asignada del padre
    (outputWithoutParams)="parentWithOutParams()"> // al disparar el componente hijo el emit de outputWithoutParams, hará que se ejecute la función asignada del padre
<children-component>
```
```typescript
// parent.component.ts
parentWithParams(
    dataFromChildEvent: any // en el caso del ejemplo aquí llegará { hello: 'world' }
) {
    console.log(dataFromChildEvent);
}
parentWithOutParams(
   // Como es un output void, solo nos llega que se a ejecutado un evento, sin parametros
) {
    console.log('output executed');
}