analog
analog copied to clipboard
analogjs
@Input doesn't work from Astro component
Please provide the environment you discovered this bug in.
Tsconfig:
{
"extends": "./tsconfig.json",
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"noEmit": false,
"target": "es2020",
"module": "es2020",
"lib": [
"es2020",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true,
"experimentalDecorators": true
},
"files": [],
"include": [
"src/**/*.ts"
]
}
Package.json
{
"name": "@example/basics",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"devDependencies": {
"@analogjs/astro-angular": "^0.1.0-beta.0",
"@angular-devkit/build-angular": "^14.0.0",
"@angular/animations": "^14.2.0",
"@angular/common": "^14.2.0",
"@angular/compiler": "^14.2.0",
"@angular/compiler-cli": "^14.2.0",
"@angular/core": "^14.0.0",
"@angular/platform-browser": "^14.0.0",
"@angular/platform-browser-dynamic": "^14.2.0",
"@angular/platform-server": "^14.0.0",
"@astrojs/react": "^1.2.0",
"@astrojs/svelte": "^1.0.1",
"@astrojs/tailwind": "^2.0.2",
"@astrojs/vue": "^1.1.0",
"astro": "^1.1.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"rxjs": "^7.5.0",
"svelte": "^3.46.4",
"tailwindcss": "^3.0.24",
"tslib": "^2.0.0",
"vue": "^3.2.30",
"zone.js": "~0.11.4"
}
}
Which area/package is the issue in?
astro-angular
Description
When you create your component and you use with an Input from an Astro component, you will never receive the data from you angular component. The ngOnChange is not trigger at all. You also have an error from VS Code when you add your angular component into the Astro page.
This is the Git repo where you will be able to find the issue i encounter: https://github.com/GiuntaLucas/astro-multiframework-boilerplate
Please provide the exception or error you saw
This is the error message you will get from VS Code when you hover the angular component from Astro file.
Type '{ "client:visible": true; name: string; }' is not assignable to type 'IntrinsicAttributes'.
Property 'name' does not exist on type 'IntrinsicAttributes'
Other information
Also something i notice (maybe another topic), when you import your angular component whitout the ts extention, the client hydration is not working. I must import my angular component with this path (import { AngularHello } from "../components/hello.component.ts";) to be able to work front side.
I would be willing to submit a PR to fix this issue
- [ ] Yes
- [ ] No
Hey @GiuntaLucas. The .ts for hydration on the client is required and mentioned in the docs. As far as the ngOnChanges that's to be expected also as only the initial binding happens which should happen in the ngOnInit function
Hello, thank's a lot it end some struggle on my side. Any idea about the @Input ? I only have one input to try the communication between all the front framework and Astro, but Angular doesn't display and reconize the Input value. I followed the documentation, i have almost the same (one string input to display directly to the html). I also tried (we never know) with the "classic" syntaxe, the bracket one, but VS Code return more errors. I attach some print of my code, maybe it can be helpful (you will be able to find all the code to the git repo i shared, which is a fork of one of your project with Angular and Astro)
Astro part:
---
import Layout from "../layouts/Layout.astro";
import { AngularHello } from "../components/hello.component.ts";
import SvelteHello from "../components/hello.svelte";
import { ReactHello } from "../components/hello";
import VueHello from "../components/hello.vue";
import AstroHello from "../components/hello.astro";
const svelte = 'Svelte';
const angular = 'Angular';
const react = 'React';
const vue = 'Vue';
const astro = 'Astro';
---
<Layout title="Welcome to Astro multri framework">
<div class="grid grid-flow-col grid-cols-5 h-screen w-screen gap-2">
<div class="flex flex-col justify-center">
<AstroHello name={astro}/>
</div>
<div class="flex flex-col justify-center">
<AngularHello client:visible name={angular} />
</div>
<div class="flex flex-col justify-center">
<ReactHello client:visible name={react}/>
</div>
<div class="flex flex-col justify-center">
<SvelteHello client:visible name={svelte} />
</div>
<div class="flex flex-col justify-center">
<VueHello client:visible name={vue}/>
</div>
</div>
</Layout>
Angular part:
@Component({
selector: 'app-hello',
standalone: true,
template: `
<h1 class="text-red-500">Hello {{name}}</h1>
<button (click)="toggle()">Yo</button>
<p>{{yo}}</p>
`,
})
export class AngularHello implements OnInit {
yo = '';
@Input() name: string;
private readonly ngZone = inject(NgZone);
constructor() {
helloSubject.pipe(enterZone(this.ngZone)).subscribe(x => this.yo = x);
}
ngOnInit(): void {
console.log(this.name)
}
toggle() {
helloSubject.next('Yo from Angular');
}
}
If you run the git repo, you will see that all the framework except Angular receive the value from Astro. (The communication with rxJs between each of them is working perfectly).
Thank's a lot.
try adding a ! to the @Input declaration
@Input() name!: string;
i ran it like that and i don't see any issue.
This article might be helpful https://stackoverflow.com/a/60008156/1127037
Instead of use
<VueHello client:visible name={vue}/>
Try
<VueHello client:visible {...{name: vue}} />
