The design of Angular2 components is influenced by the CSS styles set within their containers

Question

The design of Angular2 components is influenced by the CSS styles set within their containers

If I have a component named MyComponent with a table in its view

        <table>
            <thead>
                <tr>
                    <th class="col1">COL1</th>
                    <th class="col2">COL2</th>
                    <th class="col3">COL3</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="#item of items">
                    <td class="col1">{{item.content1}}</td>
                    <td class="col2">{{item.content2}}</td>
                    <td class="col3">{{item.content3}}</td>
                </tr>
            </tbody>
        </table>

I want to place MyComponent inside different containers (e.g. Container1 and Container2) and set specific attributes for the table (like column width) using CSS files attached to the containers. For example, in Container1, CSS file could be defined as:

.col1 {
    width: 40%;
}
.col2 {
    width: 30%;
}
.col3 {
    width: 30%;
}

And in Container2, a different CSS file with different attributes could be used. Is this achievable? Thank you

css angular

Answer 1

Answer №1

To implement this functionality, you can utilize the ngStyle and Input.

The structure of the MyComponent would look like this:

@Component({
  selector:'table-component',
  template:`
    <table>
      <thead>
        <tr>
          <th [ngStyle]="col1css">COL1</th>
          <th [ngStyle]="col2css">COL2</th>
          <th [ngStyle]="col3css">COL3</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="#item of items">
          <td [ngStyle]="col1css">{{item.content1}}</td>
          <td [ngStyle]="col2css">{{item.content2}}</td>
          <td [ngStyle]="col3css">{{item.content3}}</td>
        </tr>
      </tbody>
  </table>`
})
export class MyComponent{
  @Input() col1Css;
  @Input() col2Css;
  @Input() col3Css;
}

Subsequently, in the container components:

@Component({
    selector: 'container1',
    directives:[MyComponent],
    template: `<table-component [col2Css]="col2Css" [col3Css]="col3Css" [col1Css]="col1Css"></table-component>`
})
export class Container1 {
  col1Css = {'width':'40%'};
  col2Css = {'width':'30%'};
  col3Css = {'width':'30%'};
}

You can view an example of implementation on Plunker

Answer 2

To implement this functionality, you can utilize the ngStyle and Input.

The structure of the MyComponent would look like this:

@Component({
  selector:'table-component',
  template:`
    <table>
      <thead>
        <tr>
          <th [ngStyle]="col1css">COL1</th>
          <th [ngStyle]="col2css">COL2</th>
          <th [ngStyle]="col3css">COL3</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="#item of items">
          <td [ngStyle]="col1css">{{item.content1}}</td>
          <td [ngStyle]="col2css">{{item.content2}}</td>
          <td [ngStyle]="col3css">{{item.content3}}</td>
        </tr>
      </tbody>
  </table>`
})
export class MyComponent{
  @Input() col1Css;
  @Input() col2Css;
  @Input() col3Css;
}

Subsequently, in the container components:

@Component({
    selector: 'container1',
    directives:[MyComponent],
    template: `<table-component [col2Css]="col2Css" [col3Css]="col3Css" [col1Css]="col1Css"></table-component>`
})
export class Container1 {
  col1Css = {'width':'40%'};
  col2Css = {'width':'30%'};
  col3Css = {'width':'30%'};
}

You can view an example of implementation on Plunker

Answer 3

Answer №2

If you have multiple .css files, one approach is to utilize the styleUrls property within the @Component decorator which can accept an array of strings. Keep in mind that there are various ways to achieve your desired outcome and the possibilities are vast, making it difficult to pinpoint a specific method. However, I believe this suggestion could be beneficial for you (although the extent of its usefulness may vary). In my example on Plunker, I am demonstrating the use of different stylesheets with unique attributes, as per your request. Your question has multiple potential solutions.

http://plnkr.co/edit/RaJgtc?p=preview

@Component({
  ...
  styleUrls: ['src/style.css','src/styleone.css'],
  ...
})

Answer 4

If you have multiple .css files, one approach is to utilize the styleUrls property within the @Component decorator which can accept an array of strings. Keep in mind that there are various ways to achieve your desired outcome and the possibilities are vast, making it difficult to pinpoint a specific method. However, I believe this suggestion could be beneficial for you (although the extent of its usefulness may vary). In my example on Plunker, I am demonstrating the use of different stylesheets with unique attributes, as per your request. Your question has multiple potential solutions.

http://plnkr.co/edit/RaJgtc?p=preview

@Component({
  ...
  styleUrls: ['src/style.css','src/styleone.css'],
  ...
})

Answer 5

Answer №3

One recommendation is to start by following @Abdulrahman's method and if you encounter situations where more flexibility is needed because the styling requirements are not predetermined, consider utilizing the shadow-piercing CSS combinator >>>:

@Component({
  selector: 'box1-cmp',
  directives: [MyBox],
  template: `
    <my-box></my-box>
    <my-box></my-box>
    <my-box></my-box>`,
  styles: [`
    my-box >>> .column1 { width: 40%; }
    my-box >>> .column2 { width: 30%; }
    my-box >>> .column3 { width: 30%; }
  `]
})
export class Box1Cmp {
}

@Component({
  selector: 'box2-cmp',
  directives: [MyBox],
  template: `
    <my-box></my-box>
    <my-box></my-box>
    <my-box></my-box>`,
  styles: [`
    my-box >>> .column1 { width: 10%; }
    my-box >>> .column2 { width: 10%; }
    my-box >>> .column3 { width: 50%; }
  `]
})
export class Box2Cmp {
}

Answer 6

One recommendation is to start by following @Abdulrahman's method and if you encounter situations where more flexibility is needed because the styling requirements are not predetermined, consider utilizing the shadow-piercing CSS combinator >>>:

@Component({
  selector: 'box1-cmp',
  directives: [MyBox],
  template: `
    <my-box></my-box>
    <my-box></my-box>
    <my-box></my-box>`,
  styles: [`
    my-box >>> .column1 { width: 40%; }
    my-box >>> .column2 { width: 30%; }
    my-box >>> .column3 { width: 30%; }
  `]
})
export class Box1Cmp {
}

@Component({
  selector: 'box2-cmp',
  directives: [MyBox],
  template: `
    <my-box></my-box>
    <my-box></my-box>
    <my-box></my-box>`,
  styles: [`
    my-box >>> .column1 { width: 10%; }
    my-box >>> .column2 { width: 10%; }
    my-box >>> .column3 { width: 50%; }
  `]
})
export class Box2Cmp {
}

The design of Angular2 components is influenced by the CSS styles set within their containers

Answer №1

Answer №2

Answer №3

Similar questions

The Best Way to Calculate a Total Sum with Comma-Separated Values in AngularJS

Using conditional statements in CSS with the "if else"

Maximizing the use of default top positioning for absolutely positioned elements

Modify MUI's ListItemText component by targeting a specific span to implement customized styles using the useStyle hook

Having trouble with less.modifyVars not functioning properly in Visual Studio?

Arrangement of cards in a column

What is the best way to combine various ngrx selectors together?

Ng-Zorro nz-range-picker resizing issue on smaller mobile screens

What is the best way to create stylish corners on my website?

Tips for aligning a menu that expands from the side to the center

Avoid having the navigation bar menu wrap over onto multiple lines

To retrieve the specific section containing data and prevent any empty sections in Angular2

Interacting between Angular 2/4 components via a shared service

The <h> tag gains height on its own accord

Ways to display varied JSON information on a component in Angular 4

What is the best way to display a single instance of a React component that is declared in multiple locations within the app?

Encountering a problem with npm install due to git not being found

Type 'function that accepts an argument of type User and TypedAction<"login start"> and returns void'

Retrieve information from Wordpress API and integrate it into Angular 7

Difficulty in generating a canvas for capturing a signature using Angular 8