Web component 'header image' - angular elements

I need a developer with experience in web components and angular elements

The bona iqiniso project uses web components to spread the complexity of the app logic. Web components have the logic for the component, where the angular front end has the (integration) logic .

This project is to create a web component that is one of the most used components in the bona iqiniso app, the image header

There is only 1 states to this web component:
- null: header component

The web component receives input (image, fade color) and emits no output (except the output emitted by the enclosed compoennets)

this header image is used in combination with the bi-main stage and may enclose other components and/or HTML code

... some other component or HTML code

This project handles the logic within the component, not outside (angular). For this component, there is no real logic.

you will receive a working HTML for the navigation component that can be used to retrieve bits and pieces of code, but certainly also will need to be cleaned up. It is an HTML generated from sketch by a company called anima. I can already say that you will have to implement a solution to fade the image to black at the bottom, which is not included in the anima html.

Goal is to use as many components as possible, but only if it makes sense (components to be used in several functionality of bona iqiniso).

This project is about 4 hours of work (I have done it myself in the past).