Pipes | DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, AsyncPipe, JsonPipe

| Angular

• Pipes | DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, AsyncPipe, JsonPipe | Angular

• Pipes padrão do Angular

  

  • Currency

    {{element | currency: 'USD':'symbol':'.2'}}

  • Percent

    {{ element | percent:'.2'}}

  

  • Async pipe

  //class
  @Input() data$: Observable<string | number>;
  
  //component
  <ng-container *ngIf="data$ | async as data">
     <div class="component-container">
        <b>Dope Component</b>
        <p>Emitted Values: {{ data }}</p>
     </div>
  </ng-container>

Lista de pipes

• DatePipe: Formata datas conforme o locale.

  {{ today | date:'dd/MM/yyyy' }} <!-- Ex: 15/10/2025 -->

• UpperCasePipe: Converte texto para maiúsculas.

  {{ 'angular' | uppercase }} <!-- ANGULAR -->

• LowerCasePipe: Converte texto para minúsculas.

  {{ 'ANGULAR' | lowercase }} <!-- angular -->

• CurrencyPipe: Formata número como moeda.

  {{ 1500 | currency:'BRL' }} <!-- R$1.500,00 -->

• DecimalPipe: Formata número com casas decimais.

  {{ 3.14159 | number:'1.2-2' }} <!-- 3,14 -->

• PercentPipe: Mostra número em formato de porcentagem.

  {{ 0.25 | percent }} <!-- 25% -->

• AsyncPipe: Assina observáveis automaticamente.

  {{ data$ | async }}

• JsonPipe: Exibe objetos como JSON (útil para debug).

  <pre>{{ user | json }}</pre>