It's my first time trying to build a library in Angular, so I'm a little bit lost here. When I style my components with the assigned stylesheets, nothing follows into the actual library, leaving my components unstyled and mismatched to the rest of the application.
I tried just writing the code normally, of course, but ran into this issue. This is what the component.ts looks like:
import { KeyValue } from '@angular/common';
import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'stat-table',
templateUrl: './stat-table.component.html',
styleUrls: ['./stat-table.component.css']
})
export class StatTableComponent implements OnInit {
@Input() dataArray?: any[];
@Input() titleArray?: string[];
constructor() { }
ngOnInit(): void {
}
originalOrder = (a: KeyValue<number,string>, b: KeyValue<number,string>): number => {
return 0;
}
}
Template:
<table>
<tr>
<th *ngFor="let title of titleArray">{{title}}</th>
</tr>
<tr *ngFor="let object of dataArray">
<td *ngFor="let field of object | keyvalue: originalOrder">{{field.value}}</td>
</tr>
</table>
And the stylesheet:
table {
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}
tr {
border: none;
font-size: small;
}
tr:nth-child(even) {
background-color: #ddd;
}
td,
th {
padding: 10px;
}
th {
background-color: #ecf9f3;
}
I have also tried to include a stylesheet as an asset in the ng-packagr for the project, but that also does absolutely nothing. Either way, my ng-package.json looks like this:
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/library-name",
"lib": {
"entryFile": "src/public-api.ts"
},
"assets": ["./styles.scss"]
}
I have tested this component in a regular application project, and it all seems to run fine. Anyone have any guidance to give?