https://github.com/rominarg/card_angular17

ISPC_Angular 17_ Example Card
https://github.com/rominarg/card_angular17

angular17

Last synced: about 2 months ago
JSON representation

ISPC_Angular 17_ Example Card

• Host: GitHub
• URL: https://github.com/rominarg/card_angular17
• Owner: rominarg
• Created: 2024-05-06T22:58:03.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-05-07T00:11:03.000Z (8 months ago)
• Last Synced: 2024-05-08T00:27:54.264Z (8 months ago)
• Topics: angular17
• Language: TypeScript
• Homepage:
• Size: 800 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![image](https://github.com/rominarg/card_Angular17/assets/45200064/6acc45a1-c8f7-41cb-9b6d-a6fb3d58ec6b)

Lo que estamos viendo es una explicación detallada de tres directivas estructurales fundamentales en Angular: **ngIf, ngFor y ngSwitch**. Estas directivas te permiten controlar la estructura del DOM de manera dinámica en función de las condiciones y datos de tu componente.

Aquí hay un resumen de cada una de estas directivas:

**Directiva ngIf**: Esta directiva se utiliza para mostrar u ocultar un elemento del DOM en función de una expresión. Si la expresión es verdadera, el elemento se muestra; de lo contrario, se oculta.Por ejemplo:

html

Copy code

Contenido visible si la condición es verdadera
  


**Directiva ngFor**: ngFor se utiliza para iterar sobre una colección de elementos y renderizar un fragmento del DOM para cada elemento de la colección. Es especialmente útil cuando necesitas generar repetidamente elementos basados en una lista de datos.Por ejemplo:

html

Elemento: {{ item }}
  


**Directiva ngSwitch**: ngSwitch se utiliza para mostrar u ocultar elementos en función del valor de una expresión. Se utiliza junto con las directivas ngSwitchCase y ngSwitchDefault para definir diferentes casos y el caso predeterminado.Por ejemplo:

html



  
Contenido para caso 1

  
Contenido para caso 2

  
Contenido predeterminado



En el ejemplo proporcionado, se muestra cómo utilizar estas directivas en un componente Angular para renderizar dinámicamente una galería de tarjetas (cards) basada en una lista de imágenes (imagenList). Las directivas ngIf y ngFor se utilizan para controlar la visibilidad y la generación de las tarjetas, respectivamente.


![image](https://github.com/rominarg/card_Angular17/assets/45200064/01f96b64-000c-4e53-bb7e-043052b29906)

# Card

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.6.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.