Угловой - Как связать кнопку для различных целей? - PullRequest
Новая
       5

Угловой - Как связать кнопку для различных целей?

0 голосов
/ 27 февраля 2019

Я новичок в Angular и TypeScript.

Мне нужно сделать кнопку, которая может иметь текст или значок или текст + значок.

Пример:

button-icon-text-component.html 

<button>
  TEST BUTTON
</button>

app.component.html 

<app-button-icon-text {here I have to choose beetwen TEXT or ICON}></app-button-icon-text>

button-icon-text-component.ts 

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

@Component({
  selector: 'app-button-icon-text',
  templateUrl: './button-icon-text.component.html',
  styleUrls: ['./button-icon-text.component.css']
})
export class ButtonIconTextComponent implements OnInit {

{ADD SOME LOGIC}

  constructor() { }

  ngOnInit() {
  }

}

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019

Это мои 3 примера:

Для иконок, которые я установил: npm i material-icons

Затем я импортировал материал в style.css: @import '~ material-icons / iconfont/material-icons.css';

app.component.html 

//text button
<app-button-icon-text [text]="'test'"></app-button-icon-text>
  <br><br>

//iconbutton
  <app-button-icon-text [icon]="'face'"></app-button-icon-text>
  <br><br>

//icon + text button
  <app-button-icon-text [text]="'test'" [icon]="'face'"></app-button-icon-text>

button-icon-text.component.html 

<button>
  <span *ngIf="icon"  class="material-icons">{{icon}}</span>
  {{text}}
</button>

button-icon-text.component.html 

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

@Component({
  selector: 'app-button-icon-text',
  templateUrl: './button-icon-text.component.html',
  styleUrls: ['./button-icon-text.component.css']
})
export class ButtonIconTextComponent implements OnInit {

  @Input()
  text;

  @Input()
  icon;

  constructor() {
  }

  ngOnInit() {
  }

}
0 голосов
/ 27 февраля 2019

Используйте @Input декоратор и установите 'TEXT' или 'ICON' на нем.

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

app.component.html: 

<app-button-icon-text type="TEXT"></app-button-icon-text>

button-icon-text-component.ts: 

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

@Component({
  selector: 'app-button-icon-text',
  templateUrl: './button-icon-text.component.html',
  styleUrls: ['./button-icon-text.component.css']
})
export class ButtonIconTextComponent implements OnInit {

  @Input()
  type // TEXT or ICON

  constructor() { }

  ngOnInit() {
  }

}

button-icon-text-component.html: 

<button *ngIf="type === 'TEXT'">
  TEST BUTTON
</button>
...
...