Copy ion-card css for use in Angular app

I have an Angular web app admin panel in which users can create cards and content for the cards that show in an Ionic App. In the Ionic app I use ion-card and the other ion-card elements.

I want to create a preview of the cards in the Angular app however I don’t want to manually try to replicate the ion-card css.

Is there a way to copy or access the ion-card the css somehow?

If not I may just change the cards in the app to be made with regular css and not use Ionic controls.

FWIW, it’s at least theoretically possible to go the other way and include Ionic in your admin app.

I was wondering that actually. I don’t really care about the size.
I was just hoping it wouldn’t mess anything up with package versions / css.

I might give it a try if no better solution reveals itself.

Depends on what you’re using for styling on the Angular side. I’ve mixed Ionic and Angular Material before without any undue trouble. Something more all-encompassing like Semantic UI or Bootstrap might be a bit dodgier, but I expect this would be one of those situations in which the Shadow DOM stuff that catches a lot of flak here does the job it’s designed for and avoids the cross-contamination you’re concerned about.

I think you have posted in the wrong thread.

You are right… Something must have gone wrong because i don’t even remember watching this topic…

You should be able to Include Ionic Framework in your other Angular application and use ion-card as you normally would (without using the rest of the framework).

In addition to adding the dependency, you should also initialize IonicModule in app.module.ts:

import { IonicModule } from '@ionic/angular';

@NgModule({
  ...
  imports: [BrowserModule, IonicModule.forRoot()]
  ...
});

I used ng add @ionic/angular@5.0.0
Unfortunately I am getting the following errors:

‘ion-card’ is not a known element:

  1. If ‘ion-card’ is an Angular component, then verify that it is part of this module.
  2. If ‘ion-card’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.ng

Plus this in the console:

Uncaught TypeError: Object(...) is not a function
    at ionic-angular.js:549
    at Module../node_modules/@ionic/angular/fesm5/ionic-angular.js (ionic-angular.js:557)

Along with a lot of warnings:

./node_modules/@ionic/angular/fesm5/ionic-angular.js 3426:38-56
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

EDIT: I think this was due to me not adding it to the pages module however I have done it a different way as mentioned in the next message.

I ended up doing it this way.