how can I pass a string variable as argument between the html components of an angular project?

Question

I'm making an Angular app that looks up movies on an online API, which I can add to my own database, or delete them from my database. There are 3 components: - movie, which has the template of a movie card (consisting of poster + title) to be shown in the other 2 components - movies: a list of all the movies added in my collection. Here you can either click on the poster to go to the page with details about the movie, or delete it from my database by clicking on the fab-button. - movie-add: a simple form where you can look up movies by title or keyword in the online API. Here too, clicking on the poster brings you to the details page, but the fab button adds it to my database.

here's the HTML code for the movie component:

 <div class="card green lighten-5"> <div class="card-image"> <a routerLink="/movies/movie/{{movie.id}}"> <img src={{movie.poster}} alt={{movie.title}}> </a> <a class="btn-floating halfway-fab waves-effect waves-light red" (click)="onClick(movie)"><i class="material-icons">delete</i></a> </div> <div class="card-content"> <p><b>{{movie.title}}</b></p> </div> </div> 

This is my movies:

 <h2>Movies</h2> <div class="row"> <div class="col s6 m3" *ngFor="let movie of movies"> <media-movie [movie]='movie' (selected)='deleteMovie(movie)'></media-movie> </div> </div> 

movie-add (I omitted the form since it's not relevant to my question):

 <div class="row"> <div class="col s6 m3" *ngFor="let movie of movies"> <media-movie [movie]='movie' (selected)='addMovie(movie)'></media-movie> </div> </div> 

now, it does work, but I want the fab button to be red with the delete icon in the first case, and green with an add icon in the second. Is there a simple way I can add these 2 values in the tag?

I've tried this, but it doesn't work: movie:

 <a class="btn-floating halfway-fab waves-effect waves-light {{color}}" (click)="onClick(movie)"><i class="material-icons">{{iconAction}}</i></a> 

movie-add:

 <media-movie [movie]='movie' [color]=green [iconAction]='add' (selected)='addMovie(movie)'></media-movie> 

Answer 1

I agree that your question is a bit unclear, but I took a stab at an answer for you. There are a few ways you can do conditional binding in angular. If you want to conditionally add a class you can use ngClass . If you want to conditionally bind styles you can use property binding on the style like this [style.font-size.px]="isImportant ? '30' : '16'" , or you can user ngStyle .

I've built a quick sample app using ngStyle. It has a test button and the background color changes based on clicking the toggle file. Let me know if this helps or if you can refine your answer a bit more I'd be happy to tweak my example.

https://stackblitz.com/edit/angular-312aft