How to properly pass parameters to angular components?

Question

I'm new to Angular and I can't solve the problem for several days.

I created a component in which I want to pass the parameters I need, but the problem is that the first component displays the values ​​correctly, and the rest of the elements display the values ​​of the first.

At first I tried to pass parameters like this:

<app-pr1-button class="grid-item grid-item-1"
                [name]="'name1'"
                [label]="'label1'"
                [text]="'text1'"
                [inputtext]="['m1','m2']"
>
</app-pr1-button>
    <app-pr1-button class="grid-item grid-item-2"
                        [name]="'name2'"
                        [label]="'label2'"
                        [text]="'text2'"
                        [inputtext]="['n1','n2']"
        >
</app-pr1-button>

The element name is displayed inside the parent component, scss helped me with this, [name] is displayed correctly in both components, but the other parameters that pop up (I also did this using scss) are dropped exactly like the first component, that is, label1, text1 and 'm1', 'm2'.

Later I started passing parameters like this:

<ng-template #temp>
    <h1>label1</h1>
    <p>text1</p>
    <app-input-data [text]="['m1','m2']"></app-input-data>
</ng-template>
<app-pr1-button class="grid-item grid-item-1" [name]="'name1'" [template]="temp"></app-pr1-button>

<ng-template #temp1>
    <h1>label2</h1>
    <p>text2
    </p>
    <app-input-data [text]="['m1','m2']"></app-input-data>
</ng-template>

<app-pr1-button class="grid-item grid-item-2" [name]="'name2'" [template]="temp1"></app-pr1-button>

child ts:

export class Pr1ButtonComponent implements AfterViewInit{

@Input() template : TemplateRef<any>;
// @Input() label: string | undefined;
// @Input() text: string | undefined;
@Input() name: string | undefined;
// @Input() inputtext: string[] | undefined;
@Input() longread: string | undefined;
@ViewChild('viewcontainer',{read:ViewContainerRef}) viewcontainer : ViewContainerRef;



ngAfterViewInit() {
    this.viewcontainer.createEmbeddedView(this.template);
}


}

child html:

    <a class="button" href="#popup">{{name}}</a>
<p class="longread">{{longread}}</p>
<div class="popup" id="popup">
    <div class="popup-inner">
        <div class="popup__photo">
            <img src=""
                 alt="">
        </div>
        <div class="popup__text">
            <div #viewcontainer></div>
<!--            <h1>{{label}}</h1>-->
<!--            <p>{{text}}</p>-->

        </div>
        <a class="popup__close" href="#">X</a>
    </div>
</div>

If I remove my styles from scss, then these are the parameters that I pass, so I tend to assume that the point is that scss does not allow data to be updated. Can someone suggest how to solve this problem?

P.S

Scss:

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,600&subset=latin-ext');

$main-color: #9191E9;

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  html, body {
    font-size: 12px;
  }
}
.longread{
  padding-top: 10px;
}
.container {
  background-color: $main-color;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.button {
color: #202230;
  text-decoration:none;
}

.popup {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100vw;
  height: 100vh;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .80);
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  transition: .64s ease-in-out;
  &-inner {
    position: relative;
    bottom: -100vw;
    right: -100vh;
    display: flex;
    align-items: center;
    max-width: 800px;
    max-height: 600px;
    width: 60%;
    height: 80%;
    background-color: #fff;
    transform: rotate(32deg);
    transition: .64s ease-in-out;
  }
  &__photo {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 40%;
    height: 100%;
    overflow: hidden;
    img {
      width: auto;
      height: 100%;
    }
  }
  &__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 60%;
    height: 100%;
    padding: 4rem;
    h1 {
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 2rem;
      text-transform: uppercase;
      color: #0A0A0A;
    }
    p {
      font-size: .875rem;
      color: #686868;
      line-height: 1.5;
    }
  }
  &:target {
    visibility: visible;
    opacity: 1;
    .popup-inner {
      bottom: 0;
      right: 0;
      transform: rotate(0);
    }
  }
  &__close {
    position: absolute;
    right: -1rem;
    top: -1rem;
    width: 3rem;
    height: 3rem;
    font-size: .875rem;
    font-weight: 300;
    border-radius: 100%;
    background-color: #0A0A0A;
    z-index: 4;
    color: #fff;
    line-height: 3rem;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
  }
}

Answer 1

ok it was a stupid mistake

I changed this:

<a class="button" href="#popup">{{name}}</a>
<p class="longread">{{longread}}</p>
<div class="popup" id="popup">

to this:

<a class="button" href="{{'#'+name}}">{{name}}</a>
<p class="longread">{{longread}}</p>
<div class="popup" id="{{name}}">

Answer 2

Passing parameters to components works always the same way:

1. Create an Input property in the components code file: @Input() propertyName: string;
2. Set the value in the markup file where the component is used: <component [propertyName]="'Hello'"></component>

What I can see in your example, you're doing it right, generally.

But there's a lot more stuff that might lead to confusion in your code, for instance, I would never pass a TemplateRef as an input property to a component. Also the intention to use a ViewContainerRef is unclear to me. My suggestion is, focus on what you want to achieve, clean up a bit and you'll see that it will work.