I am trying out writing web components in Angular and I cannot seem to figure out how to pass data into the component.
<my-component someId="1234"></my-component>
I was hoping to find some way to implement this and get the someId in my angular component. Is it possible to implement this or should I be trying to use slots? Just to be clear I'm asking how to make web components using angular not normal angular components.
You should make use of Angular's data binding
<my-component [id]="1234"></my-component>
And on your child component, make use of the @Input decorators
export class MyComponent {
@Input('id') id: string;
}
<my-component [id]="1234"></my-component> will throw error in the react application. Do you know how to solve that ?You need to use @Input() variable declared in your shared component.
export class MyComponent {
@Input() someId: string = '1234';//default value
}
//HTML
<my-component someId="1234"></my-component>
"someId" is a optional input parameter that can be ignored as well.
EDIT: in a case where you are binding some constant string or number into an input it doesn't have to be specified in square brackets. You can use the same syntax as normal html attribute.
undefined. Do you have any suggestion for that ?I have had this issue about two days and finally I found the solution.
What you have to do is use the method ngOnChanges() in your component child (web component that you want to expose). Since this is to detect any change of your @Input() fields.
Here I leave a snippet code of my web component:
@Component({
selector: 'app-shipment-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnChanges {
@Input() domain;
@Output() response = new EventEmitter<string>();
constructor() {
}
ngOnInit(): void {
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.domain) {
console.log("Domain URL: ", this.domain);
this.response.emit(this.domain);
}
}
}
Not sure if your actual code looks like like this one, but in this particular example that you have provided, you can not detect sent string, nor will ngOnChanges fire a detection cycle.
If you are providing plain string to component, then you need to wrap it in simple quotes.
It has to be
<my-component [someId]="'1234'"></my-component>
It seems that if your Angular component that is exposed as a web component has a name in mixed case for the property such as sessionId, if you want to pass in some data as a literal you can do so like this: <my-component session-id="123"></my-component> The property name will automatically be converted to kebab-case. However, if you want to pass in a variable and use square-bracket syntax, the property will be available using its expected Angular property name without conversion to kebab-case such as <my-component [sessionId]="whatever.sessionId"></my-component>
