Mejoras de la página About en e-commerce: audio y contador dinámico

Clase 41 de 71 • Curso de Angular: Creación de Aplicaciones Web

Clase anteriorSiguiente clase

Juan Camilo Salazar Serna

student•

Si o les carga el audio añadan: "src/assets", dentro de assets en el archivo angular.json.

Daniel Jaime Florez Aguirre

student•

Aún así no me funciona, me aparece "Estado: 404 not found"

Raycris Maldonado

student•

Gracias amigo!

David Lopera Henao

student•

Si no tienen carpeta "assets", guarden el audio en public y la Url será "audio.mp3"; quedando así:

<app-wave-audio audioUrl="audio.mp3"></app-wave-audio>

Juan Manuel Valenzuela Montero

student•

Muchas gracias compañero por el aporte 👍.

Nestor G.

student•

Usando la nueva sintaxis de angular @if @else, quedaría así:

<div>
  <div #wave></div>
  <button (click)="playPause()">
    @if (!isPlaying()) {
    <span>Play</span>
    } @else {
    <span>Pause</span>
    }
  </button>
</div>

```\<div>  \<div #wave>\</div>  \<button (click)="playPause()">    @if (!isPlaying()) {    \<span>Play\</span>    } @else {    \<span>Pause\</span>    }  \</button>\</div>

David Salcedo

student•

Queda mucho mejor con la nueva sintaxis.

Francisco Javier Cervantes Candelario

student•

Podemos usar un ternario tambien

<div>
    <div #wave></div>
    <button (click)="playPause()"> {{ isPlay() ? 'Pause' : 'Play' }} </button>
</div>

```\<div>    \<div #wave>\</div>    \<button (click)="playPause()"> {{ isPlay() ? 'Pause' : 'Play' }} \</button>\</div>

Ivan Manrique

student•

Tambien se me ocurrio esa solucion, buen aporte!

Jhon Pulido

student•

tuve problema al utilizar window, siempre me indicaba este error ReferenceError: window is not defined , al investigar este problema en la pagina https://stackoverflow.com/questions/77514292/angular-17-window-not-defined me indica que el archivo angular.json esta configurado

"server": "src/main.server.ts",

"prerender": true,

"ssr": { "entry": "server.ts" },

y esta opciones se pueden deshabilitar de la siguiente manera

"server": "src/main.server.ts",

"prerender": false,

"ssr": false,

fue la unica manera que me dejo trabajar, esto que exactamente hace?

Henry Alcaraz

student•

Para Angular v19, la solución de no encontrar la carpeta assets en la ruta src, como se muestra en la imagen

fue la siguiente:

En el archivo angular.json en el modelo de las rutas assets

se agregó la ruta nueva con el siguiente formato:

y para que se muestren los cambios debemos para la ejecución de nuestra app y volverla a correr. Asi podremos mandar a llamar el audio en el html como lo muestro a continuación:

ya que la ruta está definida en la configuración de angular.json, espero esto le ayude para entender como agregar más rutas para tener acceso a elementos de nuestro app.

Emilio Nicolás Mendoza Patti

student•

Muchas gracias, me sirvio aun estando en la version 18

Yoexer Elias Moran Urcia

student•

Muchas gracias

David Lopera Henao

student•

Si no tienen carpeta "assets", guarden el audio en public y la Url será "audio.mp3".

<app-wave-audio audioUrl="audio.mp3"></app-wave-audio>
```\<app-wave-audio audioUrl="audio.mp3">\</app-wave-audio>

PiPe Ramirez

student•

https://www.stableaudio.com/generate

Heberth López

student•

También opté por usar un ternario como un compañero anterior había comentado 😅

<div>
  <div #wave></div>
  <button (click)="playPause()">{{ isPlaying() ? 'Pause ⏸' : 'Play ▶'}}</button>
</div>

ANDRES ALFONSO MIRA MEJIA

student•

✅

Jesus Villarreal Cuello

student•

<button (click)="playPause()"> 
        @if(isPlaying()){
            <strong>Pause</strong>
        
           }@else 
           {
           <strong>Play</strong>
           }
           <!-- <span *ngIf="isPlaying(); else myblock">Pause</span>  
           <ng-template #myblock>Play</ng-template>   -->
    </button>
```>

Jesús A. Soto Paguay

student•

<button class="btn btn-circle" (click)="playPause()"> {{ isPlaying() ? "Pause" : "Play" }}</button>

Heydi García Sánchez

student•

Como ven no tuve que hacer ninguna logica adicional en el componente para cambiar el label del btn play/pause dependiendo del estado actual con operador ternario:

<button (click)="playPause()"><span>{{ ws ? ws.isPlaying() ? 'Pause' : 'Play' : 'Play' }}</span></button>

Rodrigo Abdón Quisbert Fernández

student•

El componente de audio se me muestra pero cuando presiono play no se reproduce, no tengo ningún error por consola. ¿Qué podría estar pasando?

Luis Angel Castillo Vega

student•

desde cuando estan las ai!!?

Reinaldo Mendoza

student•

Es una buena idea tener separadas las variables del template, las referencias al template y las variables propias del componente, de esa forma cuando baya creciendo no van a quedar dispersar y es mas fácil buscar, incluso ordenarlas de forma a-z

Wilberk Ledezma

student•

Yo lo hice de esta manera, me pareció mucho más elegante y fácil de leer.

export class WaveAudioComponent { @Input({ required: true }) audioUrl!: string; @ViewChild('wave') container!: ElementRef; private audio!: WaveSurfer; buttonText = signal('Play'); ngAfterViewInit() { this.initializeWaveSurfer(); } initializeWaveSurfer() { this.audio = WaveSurfer.create({ url: this.audioUrl, container: this.container.nativeElement, }); } playPause() { this.audio.playPause(); this.updateButtonText(); } updateButtonText() { const buttonText = this.audio.isPlaying() ? 'Pause' : 'Play'; this.buttonText.set(buttonText); }}

Carlos Andrés Restrepo Restrepo

student•

Buenos días, espero se encuentren muy bien.

Estoy teniendo este problema en la con nativeElemnet en el ngAfterViewInit, de antemano muchas gracias.

Raúl Martín Casuso

student•

A mi me pasa igual. Supongo que sera por el ssr o algo así como el window del contador

Dave Juanes

student•


\<button (click)="playPause()">{{ !isPlaying() ? 'Play' : 'Pause' }}\</button>

Dave Juanes

student•

Yo lo puse asi, con un if ternario


\<button (click)="playPause()">{{ !isPlaying() ? 'Play' : 'Pause' }}\</button>

Mejoras de la página About en e-commerce: audio y contador dinámico

Introducción a Angular y Fundamentos

Desarrollo de Aplicaciones Modernas con Angular

Creando tu primer proyecto en Angular

Creación de componentes y rutas en Angular para gestión de tareas

String Interpolation en Angular: Transmisión de Datos a Templates

Modificación de Propiedades HTML con Angular: Property Binding

Eventos en Angular: click, doble click y cambio de input

Eventos de Teclado en JavaScript: Uso de KeyDown y Change

Reactividad Granular con Signals en Angular

Reactividad en HTML: Implementación de Signals en JavaScript

Estructuras de control en Angular

Estructuras de Control y Renderizado Dinámico en Angular

Gestión Dinámica de Tareas en JavaScript: Creación y Eliminación

Estructuración de Tareas en JavaScript: Uso de Interfaces y Typing

Actualización de tareas con Angular y programación inmutable

Uso de ngIf y ngFor para control de flujos en Angular

Pluralización y ngSwitch en Angular para manejo de condiciones múltiples

Manejo Avanzado de Formularios Reactivos en Angular

Validaciones de Inputs en Formularios Reactivos con Angular

Alistando tu aplicación para producción

Validación de formularios y estilos dinámicos en Angular

Activación dinámica de clases en Angular con validaciones

Edición de Tareas Dinámicas en Aplicaciones Web

Estados Computados en Programación Reactiva con Signals

Persistencia de Tareas con LocalStorage en Angular

Compilación y Optimización de Aplicaciones Angular para Producción

Lanzamiento de Aplicaciones con Firebase Hosting y Angular

Nuevas Sintaxis Declarativas en Angular Inspiradas en Svelte

Sintaxis y rendimiento de for y switch en JavaScript moderno

Migración Automática a Nueva Sintaxis de Angular

Componentes Reutilizables y Comunicación

Creación de Tienda en Línea con Angular y Tailwind CSS

Creación y Organización de Componentes en Angular

Componentes Reutilizables en Angular: Creación y Maquetado de Productos

Uso de Angular DevTools para Debugging en Angular

Inputs en Angular: Comunicación de Datos entre Componentes

Outputs en Angular: Comunicación del Hijo al Padre

Maquetación de Galería de Productos con Tailwind CSS

Ciclo de vida de los componentes

Ciclo de Vida de Componentes en Angular

Creación y Uso de Componentes en Angular: Ciclo de Vida y Comunicación

Ciclo de Vida de Componentes en Angular: Eventos Clave

Detección de Cambios en Inputs con ngOnChange en Angular

Prevención de fugas de memoria con ngOnDestroy en Angular

Creación de un Reproductor de Audio con WaveSurfer.js en Angular

Mejoras de la página About en e-commerce: audio y contador dinámico

Mejorando la interfaz del producto

Componentización y Manejo de Datos en Angular

Creación de Headers en Páginas Web con Angular

Implementación de Interfaz Gráfica para Carrito de Compras Interactivo

Implementación de Reactividad en Carrito de Compras con Angular

Gestión de Carrito de Compras en Angular con ngOnChanges

Gestión de Estado en Angular: Solución al InputDrilling

Gestión de Estado Global en Angular con Servicios y Señales

Inyección de Dependencias en Angular: Conceptos y Prácticas

Integración y Datos

Conexión de Angular a REST API usando Fake Store API de Platzi

Creación de Alias para Imports Cortos en Proyectos JavaScript

Transformación de Datos con Pipes en Angular

Creación y uso de pipes personalizados en Angular

Manipulación de Fechas en Angular con Date Functions

Manipulación del DOM con Directivas en Angular

Deployment de Aplicaciones Angular en Vercel

Enrutamiento y Navegación

Creación de Página 404 en Angular: Manejo de Rutas No Encontradas

Implementación de Router Link en Angular para SPA eficiente

Implementación de Layouts Compartidos en Angular para Vistas Anidadas

Uso de RouterLinkActive en Angular para Navegación Activa

Routing en Angular: Creación de Páginas de Detalle de Producto

Consulta dinámica de detalles de producto con Angular y REST API

Galería de Productos Dinámica con Angular y TypeScript

Mejoras en Detalle de Producto: Precio, Carrito e Imagen Activa

Perfeccionando tu e-commerce

Filtrado de Productos por Categoría en E-commerce

Filtros de Productos con Query Params en Angular

Optimización de Aplicaciones con Lazy Loading y Code Splitting

Optimización de JavaScript en Angular con Lazy Loading

Optimización de Carga de Chunks con Preloading en Angular

Migración de Angular a Nueva Sintaxis con ng generate