Angular: Aplicación con Data Binding

Construcción de una APP de Cuestionarios con Data Binding

 1. Crear un Nuevo Proyecto Angular = quiz-question

 // Creando proyecto 
   ng new quiz-question
// Entrando al Proyecto
   cd quiz-question

 2. Instalar FormsModule

  npm install @angular/forms 

3. Definir los Componentes

// Creando componente quiz
   ng generate component quiz
// Creando componente question
   ng generate component question
// Abriendo proyecto con Visual Estudio Code
   code .

 4. Configurar el Módulo Principal

// app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
// Agregando componentes
import {QuizComponent} from './quiz/quiz.component'
import { QuestionComponent} from './question/question.component'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, QuizComponent, QuestionComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'quiz-question';
}

5. Crear la Lógica del Cuestionario

// quiz.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {QuestionComponent} from '../question/question.component'

@Component({
  selector: 'app-quiz',
  standalone: true,
  imports: [CommonModule, QuestionComponent],
  templateUrl: './quiz.component.html',
  styleUrl: './quiz.component.css'
})
export class QuizComponent {
  questions = [
    {
      type: 'yes-no',
      text: 'Is the sky blue?',
      answer: ''
    },
    {
      type: 'multiple-choice',
      text: 'Which of the following is a fruit?',
      options: ['Carrot', 'Apple', 'Celery'],
      answer: ''
    },
    {
      type: 'correct-option',
      text: 'What is the capital of France?',
      options: ['London', 'Berlin', 'Paris'],
      correctOption: 'Paris',
      answer: ''
    },
    {
      type: 'true-false',
      text: 'The Earth is flat.',
      answer: ''
    }
  ];

  submitQuiz() {
    console.log(this.questions);
  }
}

<!-- // quiz.component.html -->
<div *ngFor="let question of questions">

	<app-question [question]="question"></app-question>

</div>

<button (click)="submitQuiz()">Submit Quiz</button>

// question.component.js
import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import { FormsModule } from '@angular/forms';
// import {QuizComponent} from '../quiz/quiz.component';

@Component({
  selector: 'app-question',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './question.component.html',
  styleUrl: './question.component.css'
})
export class QuestionComponent {
  @Input() question: any;
}

<!-- // question.component.html -->
<div>

  <p>{{ question.text }}</p>

  <div *ngIf="question.type === 'yes-no'">

    <label><input type="radio" [(ngModel)]="question.answer" value="yes"> Yes</label>

    <label><input type="radio" [(ngModel)]="question.answer" value="no"> No</label>

  </div>

  <div *ngIf="question.type === 'multiple-choice'">

    <label *ngFor="let option of question.options">

    <input type="radio" [(ngModel)]="question.answer" [value]="option"> {{ option }}

    </label>

  </div>

  <div *ngIf="question.type === 'correct-option'">

    <label *ngFor="let option of question.options">

    <input type="radio" [(ngModel)]="question.answer" [value]="option"> {{ option }}

    </label>
    </div>

  <div *ngIf="question.type === 'true-false'">

    <label><input type="radio" [(ngModel)]="question.answer" value="true"> True</label>

    <label><input type="radio" [(ngModel)]="question.answer" value="false"> False</label>

  </div>

</div>

6. Ejecutar la Aplicación

ng serve --open

7. Visita http://localhost:4200 en tu navegador para ver la aplicación en funcionamiento.