diff --git a/angular.json b/angular.json
index c22f61d..3950821 100644
--- a/angular.json
+++ b/angular.json
@@ -31,6 +31,7 @@
"src/assets"
],
"styles": [
+ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": []
@@ -99,6 +100,7 @@
"src/assets"
],
"styles": [
+ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": []
diff --git a/package-lock.json b/package-lock.json
index cb8b429..4abe961 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,10 +9,12 @@
"version": "0.0.0",
"dependencies": {
"@angular/animations": "~13.3.0",
+ "@angular/cdk": "^13.3.8",
"@angular/common": "~13.3.0",
"@angular/compiler": "~13.3.0",
"@angular/core": "~13.3.0",
"@angular/forms": "~13.3.0",
+ "@angular/material": "^13.3.8",
"@angular/platform-browser": "~13.3.0",
"@angular/platform-browser-dynamic": "~13.3.0",
"@angular/router": "~13.3.0",
@@ -347,6 +349,28 @@
"@angular/core": "13.3.10"
}
},
+ "node_modules/@angular/cdk": {
+ "version": "13.3.8",
+ "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.3.8.tgz",
+ "integrity": "sha512-ciLYoVxsqnA9hGJTUW74A56NjArYhFdqFYmVDimWWNYAgY7jY1gCfKq9UtixUErDi29FGSCWRbLuZ6w4q0NYnA==",
+ "dependencies": {
+ "tslib": "^2.3.0"
+ },
+ "optionalDependencies": {
+ "parse5": "^5.0.0"
+ },
+ "peerDependencies": {
+ "@angular/common": "^13.0.0 || ^14.0.0-0",
+ "@angular/core": "^13.0.0 || ^14.0.0-0",
+ "rxjs": "^6.5.3 || ^7.4.0"
+ }
+ },
+ "node_modules/@angular/cdk/node_modules/parse5": {
+ "version": "5.1.1",
+ "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+ "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+ "optional": true
+ },
"node_modules/@angular/cli": {
"version": "13.3.7",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-13.3.7.tgz",
@@ -550,6 +574,23 @@
"rxjs": "^6.5.3 || ^7.4.0"
}
},
+ "node_modules/@angular/material": {
+ "version": "13.3.8",
+ "resolved": "https://registry.npmjs.org/@angular/material/-/material-13.3.8.tgz",
+ "integrity": "sha512-y+j4WphhDZXvqKwf/fNuR+QNkH13Qc0fp7//i98f8Gy3Za1NCCc5SfIoifQ7Xqwh2ZKbgnh6GTdtbT4zq+NjaQ==",
+ "dependencies": {
+ "tslib": "^2.3.0"
+ },
+ "peerDependencies": {
+ "@angular/animations": "^13.0.0 || ^14.0.0-0",
+ "@angular/cdk": "13.3.8",
+ "@angular/common": "^13.0.0 || ^14.0.0-0",
+ "@angular/core": "^13.0.0 || ^14.0.0-0",
+ "@angular/forms": "^13.0.0 || ^14.0.0-0",
+ "@angular/platform-browser": "^13.0.0 || ^14.0.0-0",
+ "rxjs": "^6.5.3 || ^7.4.0"
+ }
+ },
"node_modules/@angular/platform-browser": {
"version": "13.3.10",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-13.3.10.tgz",
@@ -11909,6 +11950,23 @@
"tslib": "^2.3.0"
}
},
+ "@angular/cdk": {
+ "version": "13.3.8",
+ "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.3.8.tgz",
+ "integrity": "sha512-ciLYoVxsqnA9hGJTUW74A56NjArYhFdqFYmVDimWWNYAgY7jY1gCfKq9UtixUErDi29FGSCWRbLuZ6w4q0NYnA==",
+ "requires": {
+ "parse5": "^5.0.0",
+ "tslib": "^2.3.0"
+ },
+ "dependencies": {
+ "parse5": {
+ "version": "5.1.1",
+ "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+ "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+ "optional": true
+ }
+ }
+ },
"@angular/cli": {
"version": "13.3.7",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-13.3.7.tgz",
@@ -12050,6 +12108,14 @@
"tslib": "^2.3.0"
}
},
+ "@angular/material": {
+ "version": "13.3.8",
+ "resolved": "https://registry.npmjs.org/@angular/material/-/material-13.3.8.tgz",
+ "integrity": "sha512-y+j4WphhDZXvqKwf/fNuR+QNkH13Qc0fp7//i98f8Gy3Za1NCCc5SfIoifQ7Xqwh2ZKbgnh6GTdtbT4zq+NjaQ==",
+ "requires": {
+ "tslib": "^2.3.0"
+ }
+ },
"@angular/platform-browser": {
"version": "13.3.10",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-13.3.10.tgz",
diff --git a/package.json b/package.json
index 8ac5467..ff404f0 100644
--- a/package.json
+++ b/package.json
@@ -11,10 +11,12 @@
"private": true,
"dependencies": {
"@angular/animations": "~13.3.0",
+ "@angular/cdk": "^13.3.8",
"@angular/common": "~13.3.0",
"@angular/compiler": "~13.3.0",
"@angular/core": "~13.3.0",
"@angular/forms": "~13.3.0",
+ "@angular/material": "^13.3.8",
"@angular/platform-browser": "~13.3.0",
"@angular/platform-browser-dynamic": "~13.3.0",
"@angular/router": "~13.3.0",
@@ -36,4 +38,4 @@
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.6.2"
}
-}
+}
\ No newline at end of file
diff --git a/src/app/app.component.html b/src/app/app.component.html
index e11ca59..6697b29 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,484 +1,2 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{{ title }} app is running!
-
-
-
-
-
-
-
Resources
-
Here are some links to help you get started:
-
-
-
-
-
Next Steps
-
What do you want to do next with your app?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
ng generate component xyz
-
ng add @angular/material
-
ng add @angular/pwa
-
ng add _____
-
ng test
-
ng build
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b1c6c96..f132956 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,14 +3,34 @@ import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
+import { HomeComponent } from './components/home/home.component';
+import { ProductItemComponent } from './components/product-item/product-item.component';
+import { ProductListComponent } from './components/product-list/product-list.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NavbarComponent } from './components/navbar/navbar.component';
+
+import { MatCommonModule } from '@angular/material/core';
+import { MatButtonModule } from '@angular/material/button'
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+
@NgModule({
declarations: [
- AppComponent
+ AppComponent,
+ HomeComponent,
+ ProductItemComponent,
+ ProductListComponent,
+ NavbarComponent
],
imports: [
BrowserModule,
- AppRoutingModule
+ AppRoutingModule,
+ BrowserAnimationsModule,
+ MatCommonModule,
+ MatToolbarModule,
+ MatIconModule,
+ MatButtonModule
],
providers: [],
bootstrap: [AppComponent]
diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
new file mode 100644
index 0000000..6e7f679
--- /dev/null
+++ b/src/app/components/home/home.component.html
@@ -0,0 +1,2 @@
+
+home works!
diff --git a/src/app/components/home/home.component.scss b/src/app/components/home/home.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/home/home.component.spec.ts b/src/app/components/home/home.component.spec.ts
new file mode 100644
index 0000000..2c5a172
--- /dev/null
+++ b/src/app/components/home/home.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+ let component: HomeComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ HomeComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HomeComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
new file mode 100644
index 0000000..73acf06
--- /dev/null
+++ b/src/app/components/home/home.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-home',
+ templateUrl: './home.component.html',
+ styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
new file mode 100644
index 0000000..13adbae
--- /dev/null
+++ b/src/app/components/navbar/navbar.component.html
@@ -0,0 +1,7 @@
+
+ Shelf
+
+
+
diff --git a/src/app/components/navbar/navbar.component.scss b/src/app/components/navbar/navbar.component.scss
new file mode 100644
index 0000000..506cd5d
--- /dev/null
+++ b/src/app/components/navbar/navbar.component.scss
@@ -0,0 +1,3 @@
+.nav-spacer {
+ flex: 1 1 auto;
+}
\ No newline at end of file
diff --git a/src/app/components/navbar/navbar.component.spec.ts b/src/app/components/navbar/navbar.component.spec.ts
new file mode 100644
index 0000000..f8ccd6f
--- /dev/null
+++ b/src/app/components/navbar/navbar.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarComponent } from './navbar.component';
+
+describe('NavbarComponent', () => {
+ let component: NavbarComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ NavbarComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(NavbarComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts
new file mode 100644
index 0000000..6a9bec8
--- /dev/null
+++ b/src/app/components/navbar/navbar.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-navbar',
+ templateUrl: './navbar.component.html',
+ styleUrls: ['./navbar.component.scss']
+})
+export class NavbarComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/src/app/components/product-item/product-item.component.html b/src/app/components/product-item/product-item.component.html
new file mode 100644
index 0000000..1a30b61
--- /dev/null
+++ b/src/app/components/product-item/product-item.component.html
@@ -0,0 +1 @@
+product-item works!
diff --git a/src/app/components/product-item/product-item.component.scss b/src/app/components/product-item/product-item.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/product-item/product-item.component.spec.ts b/src/app/components/product-item/product-item.component.spec.ts
new file mode 100644
index 0000000..2b7b0f9
--- /dev/null
+++ b/src/app/components/product-item/product-item.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductItemComponent } from './product-item.component';
+
+describe('ProductItemComponent', () => {
+ let component: ProductItemComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ ProductItemComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ProductItemComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/product-item/product-item.component.ts b/src/app/components/product-item/product-item.component.ts
new file mode 100644
index 0000000..927555c
--- /dev/null
+++ b/src/app/components/product-item/product-item.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-product-item',
+ templateUrl: './product-item.component.html',
+ styleUrls: ['./product-item.component.scss']
+})
+export class ProductItemComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/src/app/components/product-list/product-list.component.html b/src/app/components/product-list/product-list.component.html
new file mode 100644
index 0000000..367cfef
--- /dev/null
+++ b/src/app/components/product-list/product-list.component.html
@@ -0,0 +1 @@
+product-list works!
diff --git a/src/app/components/product-list/product-list.component.scss b/src/app/components/product-list/product-list.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/product-list/product-list.component.spec.ts b/src/app/components/product-list/product-list.component.spec.ts
new file mode 100644
index 0000000..8963547
--- /dev/null
+++ b/src/app/components/product-list/product-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductListComponent } from './product-list.component';
+
+describe('ProductListComponent', () => {
+ let component: ProductListComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ ProductListComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ProductListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/product-list/product-list.component.ts b/src/app/components/product-list/product-list.component.ts
new file mode 100644
index 0000000..c1426fc
--- /dev/null
+++ b/src/app/components/product-list/product-list.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-product-list',
+ templateUrl: './product-list.component.html',
+ styleUrls: ['./product-list.component.scss']
+})
+export class ProductListComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/src/app/models/product.ts b/src/app/models/product.ts
new file mode 100644
index 0000000..eb55407
--- /dev/null
+++ b/src/app/models/product.ts
@@ -0,0 +1,5 @@
+export interface Product {
+ id: number,
+ name: string,
+ price: number
+}
\ No newline at end of file
diff --git a/src/app/services/product.service.spec.ts b/src/app/services/product.service.spec.ts
new file mode 100644
index 0000000..d5c493e
--- /dev/null
+++ b/src/app/services/product.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ProductService } from './product.service';
+
+describe('ProductService', () => {
+ let service: ProductService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(ProductService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/services/product.service.ts b/src/app/services/product.service.ts
new file mode 100644
index 0000000..2784aec
--- /dev/null
+++ b/src/app/services/product.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ProductService {
+
+ constructor() { }
+}
diff --git a/src/index.html b/src/index.html
index 66aeeb3..8d89d13 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,6 +6,9 @@
+
+
+
diff --git a/src/styles.scss b/src/styles.scss
index 90d4ee0..7e7239a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1 +1,4 @@
/* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }