This PR add Angular components WIP

[riderx]

Hello. I decided to try to integrate thanks to AI Angular components for Konsta as it's one of the most requested requests from all the users I shared it to.
It's very important for the Ionic community who have a lot of app base in Angular to have a Ionic or Capacitor library which is a good alternative to add a Ionic one because this one is based on Tailwind.

That's what I did, and I hope this will be useful.
I'm still working on it; some components have been implemented.

[danielehrhardt]

awesome

[ajitzero]

Hi @riderx - this is some great work! I came looking for Angular support myself, and this is great. Love this PR.

I've left a few comments as an early review (I realize it's still a draft). I spotted a few areas that could be simplified, and I'm happy to help if you'd like others to jump in.

My review comments are minor stuff, can be covered in incremental changes later too, but I do think it will help simplify the code quite a lot.

---

On a side note, this PR has gotten me interested in Claude yet again, with just how much the quality has improved over time.

[ajitzero]

This is not needed. We can use host to update host classes automatically.

@Component({
  selector: 'k-badge',
  imports: [CommonModule],
  template: `
    <ng-content />
  `,
  host: {
    [class]: "classes()"
  },
  changeDetection: ChangeDetectionStrategy.OnPush,
})

This also removes the need for an extra span tag.

Usage:

<k-badge></k-badge>
<k-badge />
<k-badge class="m-2" />

[ajitzero]

Similarly, this can be simplified a lot too.

@Component({
  selector: '[kBreadcrumbsSeparator]',
  imports: [CommonModule, KChevronIconComponent],
  template: `
    <k-chevron-icon [class]="iconClasses()" />
    <ng-content />
  `,
  host: {
    [class]: "classes()"
  },
  changeDetection: ChangeDetectionStrategy.OnPush,
})

This removes the need for an extra parent host element tag by switching to an attribute selector. Also, why limit this to span/li/div?

If we wanted to limit it, then the selector can be updated to: span[kBreadcrumbsSeparator], li[kBreadcrumbsSeparator], div[kBreadcrumbsSeparator]

Usage:

<span kBreadcrumbsSeparator>Hey</span>
<div kBreadcrumbsSeparator>Hey</div>
<ul>
  <li kBreadcrumbsSeparator>Hey</li>
</ul>

<span kBreadcrumbsSeparator class="m-2">Hey</span>
<div kBreadcrumbsSeparator class="m-2">Hey</div>
<ul>
  <li kBreadcrumbsSeparator class="m-2">Hey</li>
</ul>

[nolimits4web]

Hey @riderx , thanks thats a lot of work! But as i mentioned earlier i won't be able to maintain it. So i can recommend to move it to a different repo under Konsta GitHub org, or to your account, and i can make a link to it on the website

[riderx]

I’m up to take ownership if that on your org and on official website.
it’s important for the future of capacitor and my company to have a viable alternative

[nolimits4web]

@riderx ok, i created a new repo at https://github.com/konstaui/konsta-angular and invited you as a maintainer

[riderx]

Thanks @nolimits4web i'm not sure how to do this.
The current code uses 100% of your common class, so if I integrate them in this repo, they will get out of sync pretty quickly.
i see 2 solutions:
-1 make your root class it's onw lib on npm (pretty hard)
-2 keep it on konsta main repo but on angular branch (easier)

What do you think @nolimits4web

[nolimits4web]

Angular branch is not an option. I can just export all those classes and color utils from existing konsta package

[riderx]

That a great idea !

[riderx]

@nolimits4web please pig me here when you do i will init the repo with it then

[nolimits4web]

@riderx added those exports in 5.0.4

[riderx]

thanks @nolimits4web i think we need the types as well.

[riderx]

I think there is more styles and others utility

[nolimits4web]

I think there is more styles and others utility

Hey @riderx can you elaborate on this, what else is missing?

[riderx]

We use style files and utility files, not sure it make sense of importing them in NPM. Maybe in another package ?