Good way to create own button component (Primary button, Secondary button etc.)

Question

I'm new in Angular and I do not even know if this approach is good. I want to create my own universal button component and define his styles in button.component.css. After i want to use this button in my other component like login form.

I do something like that in button.component.css:

button {
  height: 50px;
  width: 100px;
  border-radius: 8px;
  font-family: "Arial Black";
  font-size: 18px;
  box-shadow: none;
}

.primary-button {
  background: #5c52ff;
  color: white;
}

.primary-button:hover {
  background: white;
  border: #5c52ff solid 2px;
  color: #5c52ff;
}

.secondary-button {
  border: forestgreen solid 2px;
  background: white;
  color: forestgreen;
}

Now in index.html i do:

<app-button class="primary-button"></app-button>

But scope of button.component.css works only in button.component.html

I should to create this style classes in global style.css and don't create button component but simple use button tag and add class attribute with property from style.css. How to approach this problem.

Possible duplicate of [How to style input and submit button with CSS?](https://stackoverflow.com/questions/17042201/how-to-style-input-and-submit-button-with-css) — Spenser Truex, Jun 26 '19 at 18:51
@Spenser Truex I now how to style this elements :) I do not know how to solve this problem architecturally — JuniorWithEverything, Jun 26 '19 at 19:07
I don't think it is clear what you are asking. You should edit your post. — Spenser Truex, Jun 26 '19 at 19:10

score 1 · Accepted Answer · answered Jun 26 '19 at 19:29

You should be setting the class to the button present in your button.component.html instead of setting it in the app-button element. You can achieve this by sending your class to the button component as an Input.

index.html

<app-button className="primary-button"></app-button>

button.component.ts

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

  @Input() className: string;

button.component.html

<button [class]="className"></button>

This way your class will be applied within the scope of button.component.css.

Thank you for your response. So from an architectural point of view, creating components in this way is a good practice? — JuniorWithEverything, Jun 26 '19 at 20:06

Good way to create own button component (Primary button, Secondary button etc.)

1 Answers1