+An educational monorepo showcasing Angular best practices, patterns, and examples.
-āØ Your new, shiny [Nx workspace](https://nx.dev) is almost ready āØ.
+## Features
-[Learn more about this workspace setup and its capabilities](https://nx.dev/getting-started/tutorials/angular-monorepo-tutorial?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or run `npx nx graph` to visually explore what was created. Now, let's get you up to speed!
+- šÆ Focused examples of Angular concepts and patterns
+- š Educational content with interactive demos
+- šļø Built with Nx for optimal monorepo management
+- šØ Nebular UI components for consistent, beautiful interfaces
+- š Dynamic topic loading with demo-loader
+- š§© Standalone components throughout
+- š BEM methodology for CSS
+- š ļø Custom generators for consistent topic creation
-## Finish your CI setup
+## Project Structure
-[Click here to finish setting up your workspace!](https://cloud.nx.app/connect/W7tEbCY6Wk)
-
-
-## Run tasks
-
-To run the dev server for your app, use:
-
-```sh
-npx nx serve showcase
```
-
-To create a production bundle:
-
-```sh
-npx nx build showcase
+angular-bits/
+āāā apps/
+ā āāā showcase/ # Main demo application
+āāā libs/
+ā āāā shared/
+ā ā āāā core/ # Core utilities and services
+ā ā āāā ui/ # Shared UI components
+ā ā āāā demo-loader/ # Dynamic topic loader
+ā āāā topics/ # Educational topic components
+āāā tools/
+ āāā generators/ # Custom Nx generators
```
-To see all available targets to run for a project, run:
+## Getting Started
-```sh
-npx nx show project showcase
+1. Clone the repository:
+```bash
+git clone https://github.com/yourusername/angular-bits.git
+cd angular-bits
```
-These targets are either [inferred automatically](https://nx.dev/concepts/inferred-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or defined in the `project.json` or `package.json` files.
-
-[More about running tasks in the docs »](https://nx.dev/features/run-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
-
-## Add new projects
-
-While you could add new projects to your workspace manually, you might want to leverage [Nx plugins](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) and their [code generation](https://nx.dev/features/generate-code?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) feature.
-
-Use the plugin's generator to create new projects.
-
-To generate a new application, use:
+2. Install dependencies:
+```bash
+npm install
+```
-```sh
-npx nx g @nx/angular:app demo
+3. Start the development server:
+```bash
+nx serve showcase
```
-To generate a new library, use:
+4. Visit http://localhost:4200
-```sh
-npx nx g @nx/angular:lib mylib
-```
+## Creating New Topics
-You can use `npx nx list` to get a list of installed plugins. Then, run `npx nx list Educational topics and patterns with Nebular UI
+ +Maintain SCSS variables in version-controlled JSON files
+Storybook integration for 100% component coverage
+Enforce 150KB CSS/JS limits per route
+Monthly WCAG 2.1 AA compliance checks
+Your Nx Cloud remote cache setup is almost complete.
- - - Click here to finish - -Here are some things you can do with Nx:
-# Build -nx build -# Test -nx test -# Lint -nx lint -# Run them together! -nx run-many -t build test lint-
nx show project showcase-
nx graph-
# Generate UI lib -nx g @nx/angular:lib ui -# Add a component -nx g @nx/angular:component ui/src/lib/button-
- Carefully crafted with - -
-Compatibility works!
diff --git a/libs/shared/compatibility/src/lib/compatibility/compatibility.component.scss b/libs/shared/compatibility/src/lib/compatibility/compatibility.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/libs/shared/compatibility/src/lib/compatibility/compatibility.component.spec.ts b/libs/shared/compatibility/src/lib/compatibility/compatibility.component.spec.ts new file mode 100644 index 0000000..4406f52 --- /dev/null +++ b/libs/shared/compatibility/src/lib/compatibility/compatibility.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { CompatibilityComponent } from './compatibility.component'; + +describe('CompatibilityComponent', () => { + let component: CompatibilityComponent; + let fixture: ComponentFixtureThis is the card body content.
+You can add any content here.
+This is a card without a footer.
+The footer section is optional.
+This is a card with only body content.
+Both header and footer are optional.
+This is a card with complex content including an image and formatted text.
+Task description goes here
+With a different description
+Content of the first tab
+Content of the second tab
+Content of the third tab
+Profile content goes here
+Settings content goes here
+Notifications content goes here
+Topics works!
diff --git a/libs/topics/src/lib/topics/topics.component.scss b/libs/topics/src/lib/topics/topics.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/libs/topics/src/lib/topics/topics.component.spec.ts b/libs/topics/src/lib/topics/topics.component.spec.ts new file mode 100644 index 0000000..c40f7ac --- /dev/null +++ b/libs/topics/src/lib/topics/topics.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { TopicsComponent } from './topics.component'; + +describe('TopicsComponent', () => { + let component: TopicsComponent; + let fixture: ComponentFixture