Jestem nowy w kanciasty i maszynopis.

Muszę zrobić przycisk, który może mieć tekst lub ikonę lub tekst + ikonę.

Przykład:

ikona-ikona-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>

ikona-ikona-tekst-komponent.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() {
  }

}
0
S.A.R.A. 27 luty 2019, 16:49

2 odpowiedzi

Najlepsza odpowiedź

Użyj @Input Decorator i Set 'TEXT' lub 'ICON' na nim.

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

app.component.html:

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

przycisku-ikona-tekst-komponent.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() {
  }

}

ikona-ikona-tekst-component.html:

<button *ngIf="type === 'TEXT'">
  TEST BUTTON
</button>
...
1
zmag 27 luty 2019, 14:11

Są to moje przykłady:

W przypadku zainstalowanych ikon: NPM i materialne ikony

Następnie importowałem materiał w stylu.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>

Przycisk-ikona-text.component.html

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

Przycisk-ikona-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() {
  }

}
2
S.A.R.A. 27 luty 2019, 14:48