Skip to content

Commit b38e6eb

Browse files
UmaMaheswariChandraboseUmaMaheswariChandrabose
authored
Merge pull request #1 from Ammu1492/main
Added angular component sample
2 parents 6b969de + a98de52 commit b38e6eb

20 files changed

+21008
-1
lines changed

‎README.md

+36-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,37 @@
1-
# getting-started-with-the-angular-tabs-component
1+
# Getting Started with the Angular Tabs Component
2+
23
A quick start Angular project that shows how to create and configure the Syncfusion Angular Tabs component in an Angular project. This project also includes a code snippet to change the tab header position and set styles to the active tab header, initialize the tab component using a template and HTML elements.
4+
5+
Examples: https://ej2.syncfusion.com/angular/demos/#/material/tab/default
6+
7+
Documentation: https://ej2.syncfusion.com/angular/documentation/tab/getting-started/
8+
9+
# Project pre-requisites
10+
11+
Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project.
12+
13+
Angular 4+
14+
15+
TypeScript 2.6+
16+
17+
# How to run this application?
18+
19+
To run this application, you need to first clone the getting-started-with-the-angular-tabs-component repository and then navigate to its appropriate path where it has been in your system.
20+
21+
To do so, open the command prompt and run the below commands one after the other.
22+
23+
git clone dialog-example
24+
25+
cd dialog-example
26+
27+
# Installing
28+
29+
Once done with downloading, next you need to install the necessary packages required to run this application locally. The npm install command will install all the needed angular packages into your current project and to do so, run the below command.
30+
31+
npm install
32+
33+
# Running on development server
34+
35+
Run ng serve command for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
36+
37+

‎angular.json

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"cli": {
4+
"analytics": "00a0b53d-4606-486b-9343-96e165340404"
5+
},
6+
"version": 1,
7+
"newProjectRoot": "projects",
8+
"projects": {
9+
"angular-tabs": {
10+
"projectType": "application",
11+
"schematics": {
12+
"@schematics/angular:application": {
13+
"strict": true
14+
}
15+
},
16+
"root": "",
17+
"sourceRoot": "src",
18+
"prefix": "app",
19+
"architect": {
20+
"build": {
21+
"builder": "@angular-devkit/build-angular:browser",
22+
"options": {
23+
"outputPath": "dist/angular-tabs",
24+
"index": "src/index.html",
25+
"main": "src/main.ts",
26+
"polyfills": "src/polyfills.ts",
27+
"tsConfig": "tsconfig.app.json",
28+
"assets": [
29+
"src/favicon.ico",
30+
"src/assets"
31+
],
32+
"styles": [
33+
"src/styles.css"
34+
],
35+
"scripts": []
36+
},
37+
"configurations": {
38+
"production": {
39+
"budgets": [
40+
{
41+
"type": "initial",
42+
"maximumWarning": "500kb",
43+
"maximumError": "1mb"
44+
},
45+
{
46+
"type": "anyComponentStyle",
47+
"maximumWarning": "2kb",
48+
"maximumError": "4kb"
49+
}
50+
],
51+
"fileReplacements": [
52+
{
53+
"replace": "src/environments/environment.ts",
54+
"with": "src/environments/environment.prod.ts"
55+
}
56+
],
57+
"outputHashing": "all"
58+
},
59+
"development": {
60+
"buildOptimizer": false,
61+
"optimization": false,
62+
"vendorChunk": true,
63+
"extractLicenses": false,
64+
"sourceMap": true,
65+
"namedChunks": true
66+
}
67+
},
68+
"defaultConfiguration": "production"
69+
},
70+
"serve": {
71+
"builder": "@angular-devkit/build-angular:dev-server",
72+
"configurations": {
73+
"production": {
74+
"browserTarget": "angular-tabs:build:production"
75+
},
76+
"development": {
77+
"browserTarget": "angular-tabs:build:development"
78+
}
79+
},
80+
"defaultConfiguration": "development"
81+
},
82+
"extract-i18n": {
83+
"builder": "@angular-devkit/build-angular:extract-i18n",
84+
"options": {
85+
"browserTarget": "angular-tabs:build"
86+
}
87+
},
88+
"test": {
89+
"builder": "@angular-devkit/build-angular:karma",
90+
"options": {
91+
"main": "src/test.ts",
92+
"polyfills": "src/polyfills.ts",
93+
"tsConfig": "tsconfig.spec.json",
94+
"karmaConfig": "karma.conf.js",
95+
"assets": [
96+
"src/favicon.ico",
97+
"src/assets"
98+
],
99+
"styles": [
100+
"src/styles.css"
101+
],
102+
"scripts": []
103+
}
104+
}
105+
}
106+
}
107+
},
108+
"defaultProject": "angular-tabs"
109+
}

‎karma.conf.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// Karma configuration file, see link for more information
2+
// https://karma-runner.github.io/1.0/config/configuration-file.html
3+
4+
module.exports = function (config) {
5+
config.set({
6+
basePath: '',
7+
frameworks: ['jasmine', '@angular-devkit/build-angular'],
8+
plugins: [
9+
require('karma-jasmine'),
10+
require('karma-chrome-launcher'),
11+
require('karma-jasmine-html-reporter'),
12+
require('karma-coverage'),
13+
require('@angular-devkit/build-angular/plugins/karma')
14+
],
15+
client: {
16+
jasmine: {
17+
// you can add configuration options for Jasmine here
18+
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19+
// for example, you can disable the random execution with `random: false`
20+
// or set a specific seed with `seed: 4321`
21+
},
22+
clearContext: false // leave Jasmine Spec Runner output visible in browser
23+
},
24+
jasmineHtmlReporter: {
25+
suppressAll: true // removes the duplicated traces
26+
},
27+
coverageReporter: {
28+
dir: require('path').join(__dirname, './coverage/angular-tabs'),
29+
subdir: '.',
30+
reporters: [
31+
{ type: 'html' },
32+
{ type: 'text-summary' }
33+
]
34+
},
35+
reporters: ['progress', 'kjhtml'],
36+
port: 9876,
37+
colors: true,
38+
logLevel: config.LOG_INFO,
39+
autoWatch: true,
40+
browsers: ['Chrome'],
41+
singleRun: false,
42+
restartOnFileChange: true
43+
});
44+
};

0 commit comments

Comments
 (0)