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

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

1. Создайте новый компонент с помощью Angular CLI командой:

ng generate component RandomBlock

2. Внутри компонента 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.
  }
}

3. Затем определите HTML-шаблон для компонента RandomBlock в файле random-block.component.html.

<div>
  <h2>Случайный номер: {{ randomNumber }}</h2>
  <div *ngIf="randomNumber > 5">
    <!-- Вставьте сюда содержимое блока, который должен появиться, если случайное число > 5 -->
  </div>
  <div *ngIf="randomNumber <= 5">
    <!-- Вставьте сюда содержимое блока, который должен появиться, если случайное число <= 5 -->
  </div>
</div>

4. Используйте компонент RandomBlock в нужном месте своего приложения, например, в корневом компоненте AppComponent:

<app-random-block></app-random-block>

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