I've been struggling with a problem in Angular for days now as I'm new to it. The issue is related to passing parameters in a component where the values are not displaying correctly.
Initially, I attempted 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>
While the 'name' parameter was displayed correctly in both components, the others were showing the same values from the first component due to styling implications (done using SCSS).
Subsequently, I tried an alternative method of passing parameters:
<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>
The challenge lies in updating data when using SCSS styles. Any suggestions on how to tackle this issue would be greatly appreciated.
P.S. Below is the snippet of SCSS used:
@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;
}
...