Как сделать кнопки отображающими текст в Angular?

Предполагая, что у вас уже есть созданная структура HTML, вам нужно сделать очень просто.

Что вам нужно сделать, так это следующее. В вашем app.component.ts (или как называется ваш компонент) объявите переменную следующим образом:

title: string = 'Display text here, after learn more clicked'

Вы можете поместить все, что хотите, так как этот текст будет заменен другими вещами.

Затем вы создадите 3 функции, что-то вроде этого:

function1() {
  this.title = 'Button 1 clicked'
}

function2() {
  this.title = 'Button 2 clicked'
}

function3() {
  this.title = 'Button 3 clicked'
}

Таким же образом измените нужный текст внутри ''.

Теперь в вашем app.component.html (или как называется ваш компонент):

Если у вас есть этот текст, я бы предположил, что он внутри h1, замените его на

{{ title }}

И, наконец, внутри каждой кнопки сделайте следующее:

<button (click) = "function1()">Learn more</buton>
<button (click) = "function2()">Learn more</buton>
<button (click) = "function3()">Learn more</buton>

И тебе будет хорошо идти.