Angular button componet 예시 / 앵귤러 버튼 컴포넌트 예시

<div
  class="rounded-md px-2.5 py-1.5 cursor-pointer"
  [ngClass]="{
    'bg-primary text-white hover:bg-primary-400': type === 'fill',
    'border border-primary text-pirmary hover:bg-primary-500 hover:text-white ':
      type === 'outline'
  }"
>
  <ng-content></ng-content>
</div>

 

import { Component, OnInit, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss'],
  standalone: true,
  imports: [CommonModule, RouterModule],
})
export class ButtonComponent implements OnInit {
  @Input() type?: 'fill' | 'outline' = 'fill';

  constructor() {}

  ngOnInit() {}
}

1. 버튼 템플릿 및 컴포넌트