Updating the Angular Avatar GS sample

README.md

@@ -1,2 +1,17 @@
-# getting-started-with-the-angular-avatar-component
-A quick-start project that helps you to integrate the Syncfusion Avatar component in an Angular application. It includes a code snippet for different sizes and types of avatars. It also includes a code snippet for integrating the Avatar with the other UI components.
+# Getting Started with the Angular Avatar Component
+A quick-start project that contains code to create and configure the Syncfusion Angular Avatar component. It includes a code snippet for different sizes and types of avatars. It also includes a code snippet for integrating the Avatar with the other UI components.
+
+Refer to the following documentation to learn about the Angular Avatar component: 
+https://ej2.syncfusion.com/angular/documentation/avatar/getting-started
+
+Check out this online example of the Angular Avatar component:
+https://ej2.syncfusion.com/angular/demos/#/bootstrap5/avatar/default
+
+## Project prerequisites
+Make sure that your machine has the following setup before starting to work on this project.
+* [Visual Studio Code](https://code.visualstudio.com/download )
+* [NodeJS](https://nodejs.org/en/download)
+* [Angular 6+](https://angularjs.org/)
+
+## How to run this application
+To run this application, you need to first clone the `getting-started-with-the-angular-avatar-component` repository and then open it in Visual Studio Code. Now, simply build and run your project using `npm start` command to view the output.

angular.json

@@ -0,0 +1,99 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular-avatar-getting-started": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/angular-avatar-getting-started",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kB",
+                  "maximumError": "4kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "angular-avatar-getting-started:build:production"
+            },
+            "development": {
+              "buildTarget": "angular-avatar-getting-started:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "angular-avatar-getting-started",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^18.2.0",
+    "@angular/common": "^18.2.0",
+    "@angular/compiler": "^18.2.0",
+    "@angular/core": "^18.2.0",
+    "@angular/forms": "^18.2.0",
+    "@angular/platform-browser": "^18.2.0",
+    "@angular/platform-browser-dynamic": "^18.2.0",
+    "@angular/router": "^18.2.0",
+    "@syncfusion/ej2-angular-layouts": "^27.1.51",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.10"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^18.2.3",
+    "@angular/cli": "^18.2.3",
+    "@angular/compiler-cli": "^18.2.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.2.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.5.2"
+  }
+}

src/app/app.component.html

@@ -0,0 +1,26 @@
+<div class='container'>
+  <!-- <div class="e-avatar image e-avatar-large"></div>   -->
+  <!-- <span class="e-avatar e-avatar-circle">LC</span> -->
+  <!-- <span class="e-avatar image e-avatar-small"></span> -->
+
+  <!-- <span class="e-avatar e-avatar-large e-avatar-circle">LC</span> -->
+  <div class="card-container">
+    <div class="e-card e-custom-card">
+      <div class="e-card-header">
+        <div class="e-avatar image e-avatar-xlarge e-avatar-circle"></div>
+      </div>
+      <div class="e-card-header">
+        <div class="e-card-header-caption center">
+          <div class="e-card-header-title name">Will Smith</div>
+          <div class="e-card-sub-title">Sales Coordinator</div>
+        </div>
+      </div>
+      <div class="e-card-content">
+        <p className="avatar-content">
+          Will Smith received a BA in psychology from the University of Washington.
+          He has also completed a course in Business French. He reads and writes French.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

src/app/app.component.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'angular-avatar-getting-started' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('angular-avatar-getting-started');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular-avatar-getting-started');
+  });
+});

src/app/app.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css'
+})
+export class AppComponent {
+  title = 'angular-avatar-getting-started';
+}

src/app/app.config.ts

@@ -0,0 +1,8 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+};

src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>AngularAvatarGettingStarted</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

src/styles.css

@@ -0,0 +1,64 @@
+/* You can add global styles to this file, and also import other style files */
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-angular-layouts/styles/material.css";
+
+/* margin: 2px; */
+.e-avatar.image {
+  background-image: url(https://ej2.syncfusion.com/demos/src/grid/images/2.png);
+  margin: 2px;
+}
+
+/* .container {
+    margin-left: 48%;
+    margin-top: 7%;
+} */
+
+.container {
+  margin: 50px auto 0;
+  width: 500px;
+  height: 700px;
+}
+
+.card-container .name {
+  margin-top: 10px;
+}
+
+.card-container {
+  max-width: 300px;
+  margin: auto;
+  min-height: 400px;
+}
+
+.e-custom-card {
+  overflow: visible;
+  margin-top: 80px;
+  border-width: 1px;
+  padding: 1px;
+}
+
+.e-custom-card .e-card-header {
+  text-align: center;
+  padding: 0px;
+}
+
+.e-custom-card .e-avatar {
+  font-size: 25px;
+  position: absolute;
+  bottom: 160px;
+  left: auto;
+  box-shadow: 0 16px 28px -8px rgba(0, 0, 0, .36), 0 4px 15px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);
+}
+
+.e-card.e-custom-card :nth-child(3) {
+  padding: 10px 0px 10px 10px;
+}
+
+.e-custom-card.e-card .e-card-content {
+  overflow: visible;
+}
+
+.avatar-content {
+  text-align: center;
+  color: rgb(94, 94, 94);
+}

tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

tsconfig.json

@@ -0,0 +1,33 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}