How to type in angular?

Question

JavaScript

There are two ways to layout components in BEM (at least I know only 2). All have their pros and cons:

1) Working with the tag:

ui-tag.component.html

<div class="ui-tag__icon" tag-info></div>
<span class="ui-tag__text">
  <ng-content></ng-content>
</span>

ui-tag.component.scss

:host {
  display: flex;
  align-items: center;
  width: max-content;
  height: max-content;
  border-radius: 8px;
  cursor: pointer;
  padding: 2px 4px;
  background-color: $purple-light;

  .ui-tag {
    &__icon {
      margin-right: 4px;
    }

    &__text {
      @include typography_body_small;
      color: $purple;
    }
  } //

  &:hover {
    transform: scale(0.05);
  }
  
  @include media('<=tablet') {
    padding: 2px;
  }

  &.ui-tag {
    &--disabled {
      cursor: not-allowed;
      background-color: $grey-light;

      .ui-tag__text {
        color: $grey;
      }
    }
  }
}

In scss we work with the tag via :host

2) Use the tag as a wrapper and don't access it:

ui-tag.component.html

<div class="ui-tag">
  <div class="ui-tag__icon" tag-info></div>
  <span class="ui-tag__text">
    <ng-content></ng-content>
  </span>
</div>

ui-tag.component.scss

.ui-tag {
  display: flex;
  align-items: center;
  width: max-content;
  height: max-content;
  border-radius: 8px;
  cursor: pointer;
  padding: 2px 4px;
  background-color: $purple-light;
  $self: &;

  &__icon {
    margin-right: 4px;
  }

  &__text {
    @include typography_body_small;
    color: $purple;
  }

  &:hover {
    transform: scale(0.05);
  }

  @include media('<=tablet') {
    padding: 2px;
  }

  &--disabled {
    cursor: not-allowed;
    background-color: $grey-light;

    #{$self}__text {
      color: $grey;
    }
  }
}

I like the second method, because in my opinion it is more understandable, and you can use it, $self: &which is very cool, and more on BEM, but there is a minus, in order to refer to a component from another in scss, you will need to add a class to it and write this: .index __tag > * {}

In general how to do it right?

Answer 1

Why do you need BEM in Angular? You have encapsulation, do not complicate the layout in the place where it is not needed at all. Understand the problems that the tool under the BEM label solves and ask yourself the question - why is it in Angular?

Answer 2

2nd option for bem. Changing the styles of a component with the styles of another component is bad practice => there is nothing wrong with doing it inconveniently.
Didn't understand how the question relates to Angular