How do I pass a class to a child component?-CodePudding

I have a child component like this:

<img [src]="imageToShow" alt="photo">

And I want to pass the class through parent to child:

<app-image [image]="data.image" ></app-image>

How to do it?

CodePudding user response：

-You can import the parent stylesheet into the stylesheet of the child component and just use the class. -If there is a particular property in that class you want, you can try the inherit value depending on which property it is...maybe might work.

Assuming that is what you mean. If not it would be helpful the see the files.

CodePudding user response：

If your class are defined "globally" -e.g. in the styles.css or any file you indicate in angular.json (in "styles" array), you can pass as any @Input and use [ngClass]

//child
@Input() image:string;
@Input() classcss:string;
<img [ngClass]="classcss" [src]="image" alt="photo">

//parent 
<app-image [image]="data.image" classcss="w-100 shadow"></app-image>

Another option is use some like

//parent
<app-image [image]="data.image" ></app-image>
//parent.css (or styles.css)
.child img{
   width:100%;
   box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

Or simply

//parent
<app-image [image]="data.image"></app-image>
//parent.css (or styles.css)
app-image img{  //<--see that use "app-image"
   width:100%;
   box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

You can use also "css variables". So, in child.css

img {
   width: var(--width);
   box-shadow: var(--box-shadow)
}

In parent.css (or styles.css)

app-image {
  --width: 100%;
  --box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

but I'm not pretty sure what do you want achieve