Как реализовать зарандомить случайный номер и вывести блок под этим номером?

Чтобы реализовать генерацию случайного номера и вывести блок под этим номером в Angular, сначала вам понадобится создать компонент и определить представление (HTML-шаблон) для него.

  1. Создайте новый компонент с помощью Angular CLI командой:
ng generate component RandomBlock
  1. Внутри компонента RandomBlock определите свойства и методы, необходимые для генерации случайного числа и отображения блока.
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-random-block',
  templateUrl: './random-block.component.html',
  styleUrls: ['./random-block.component.css']
})
export class RandomBlockComponent implements OnInit {
  randomNumber: number;

  ngOnInit() {
    this.generateRandomNumber();
  }

  generateRandomNumber() {
    this.randomNumber = Math.floor(Math.random() * 10) + 1; // Генерируем случайное число от 1 до 10.
  }
}
  1. Затем определите HTML-шаблон для компонента RandomBlock в файле random-block.component.html.
<div>
  <h2>Случайный номер: {{ randomNumber }}</h2>
  <div *ngIf="randomNumber > 5">
    <!-- Вставьте сюда содержимое блока, который должен появиться, если случайное число > 5 -->
  </div>
  <div *ngIf="randomNumber <= 5">
    <!-- Вставьте сюда содержимое блока, который должен появиться, если случайное число <= 5 -->
  </div>
</div>
  1. Используйте компонент RandomBlock в нужном месте своего приложения, например, в корневом компоненте AppComponent:
<app-random-block></app-random-block>

Теперь при каждой загрузке страницы будет генерироваться случайное число от 1 до 10, на основе которого будет решаться, какой блок будет отображаться в шаблоне компонента RandomBlock. Если случайное число больше 5, будет отображаться блок, указанный внутри *ngIf="randomNumber > 5", а если число меньше или равно 5, будет отображаться блок, указанный внутри *ngIf="randomNumber <= 5".