Как создать многократно используемый компонент кнопки с иконками

Question

Я пытаюсь создать шаблон кнопки / компонент, который можно повторно использовать в приложении. Также используется текст и значки, которые устанавливаются при использовании компонента в приложении.

Мой button.component.ts:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss']
})
export class ButtonComponent implements OnInit {
  @Input() btnTxt = ['add item', 'remove item']; 
  @Input() btnIconAdd = ''; // <mat-icon>add_circle</mat-icon>;

  constructor() {}   
  ngOnInit() {
  }    
}

button.component.html

<button mat-button
  class="form-control" [attr.icon]="btnTxt">
  <!-- <mat-icon>add_circle</mat-icon> --> // this works but isn't what I need. 
  {{btnIconAdd}} {{ btnTxt[0] }}
</button>

, а затем в другом HTML-шаблоне, где используется кнопка (мы назовем это «other-page.component.html»):

  <app-button [attr.icon]="btnIconAdd"> // identifier not defined on btnIconAdd
    <mat-icon>add_circle</mat-icon> // this does not work here
  </app-button>

Так что у меня тут несколько проблем (например, я плохо знаю Angular ..)

1. Я хочу ссылаться на иконки из массива (или нескольких переменных), как я это делаю с 'btntxt', ИЛИ иметь возможность использовать внутри в файле other-page.component.html, где использование не работает.
2. Попытка установить [attr.icon] - почему этот шаблон не может получить доступ к btnTxt (даже если для него задана одна строка, а не массив)?
   3. Попытка использовать {{btnTxt}} в «other-page.component.html» также приводит к сообщению с идентификатором, который не определен.

Помощь очень признательна, и не стесняйтесь сказать мне «вы делаете это неправильно».

Answer 1

Решение было сделать так, как сказал пользователь 184994, но с иконкой все было немного иначе. Напомним: попытка создать элемент кнопки, который можно использовать с другим текстом, значками и вызовами методов:

Я упростил свой файл button.ts, чтобы больше не использовать массив возможных значений:

export class ButtonComponent implements OnInit {
  @Input() btnTxt: string;
  @Input() btnIcon: string;

и ссылка <app-button> вместо кнопки, как указано пользователем @ user184994. Также от пользователя 184994, я правильно ссылался на мои атрибуты и переменные.

В моем файле 'other-page.component.html' ( обратите внимание на двойные и одиночные вложенные кавычки , чтобы избежать установки значения атрибута в other-page.comnponent. ts вместо возможности доступа к значениям из файла компонента кнопки ts). «add_circle» - это имя иконки:

  <app-button-with-icon [btnTxt]="'hello'" [btnIcon]="'add_circle'">
  </app-button-with-icon>

И, наконец, мой button.component.html, как показано ниже. Одна из проблем, с которыми я столкнулся, заключалась в возможности указать значок во время использования кнопки, я не мог поместить разметку значка в шаблон другой страницы, но вместо этого мне пришлось поместить разметку в шаблон компонента кнопки и сослаться на пустая строковая переменная, затем установите значение в шаблоне, где используется кнопка (см. предыдущий фрагмент кода).

<button mat-button class="form-control primary">
  <mat-icon>{{btnIcon}}</mat-icon>
  {{btnTxt}}
</button>

Answer 2

Я сделал пример в SB, может быть, вы можете увидеть, если это то, что вы пытаетесь сделать, посмотрите последний пункт (универсальная кнопка-мат с иконкой)

https://stackblitz.com/edit/angular-rb5vmu