Html Question posted in
Some basic documentation can be found here.

Included HTML component ignores width

I cannot seem to find a problem or I am misunderstanding something (I use daisyui + nx + tailwind css + angular). Very simplified scenarios for my problem:

  1. For first scenario I have:
<div class="flex flex-row">
  <div class="btn btn-primary w-1/2"></div>
  <app-home-side-bar></app-home-side-bar>
</div>

where side-bar component is:

<div class="btn btn-primary w-1/2"></div>

the result:
enter image description here

However,

  1. In this scenario I have everything in one place:
<div class="flex flex-row">
  <div class="btn btn-primary w-1/2"></div>
  <div class="btn btn-primary w-1/2"></div>
</div>

the result:
enter image description here

Why included component ignores the 50% width parameter?

Tags:

2

Answers


  1. 0

    you can make rendering behave like app-home-side-bar component tag doesn’t exist.

    app-home-side-bar.scss

    :host {
  display: contents;
}

    the result is the same as side-bar internal nodes were direct children of the tag where it was rendered

    Login or Signup to reply.
  2. 0

    Using the attribute selector to initialize the component, so that no CSS changes will be needed!

    In the below example, we have changed the selector property to check the attribute ComponentSelector instead of the html tags, this has the advantage that the component CSS is not messed up, since we initialize through the attributes!

    import { Component, OnInit } from '@angular/core';

@Component({
  selector: '[ComponentSelector]',
  standalone: true,
  template: `
    <div></div>
  `,
  host: {
    class: 'btn btn-primary w-1/2',
  },
})
export class AComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

    Usage on the parent

    <div class="flex flex-row">
  <div class="btn btn-primary w-1/2"></div> 
  <div class="btn btn-primary w-1/2" ComponentSelector></div><!-- note this addition, I am initializing the component using attributes instead of element selector -->
</div>

    Alternative

    Please add the CSS to the angular tag that contains the HTML, you need to add it to the host property of @component decorator, this will ensure the CSS gets applied to the root component selector.

    import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-a',
  standalone: true,
  template: `
    <div></div>
  `,
  host: {
    class: 'btn btn-primary w-1/2',
  },
})
export class AComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search