Merge pull request #841 from dxc-technology/jialecl-updateInstallation

Updating installation process in Overview page

Author: aidamag

projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-materialTheme.properties

@@ -0,0 +1 @@
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";

projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-npm.properties

@@ -1,10 +1,43 @@
 
-npm install -g @angular/cli@10.2.0
+npm install -g @angular/cli@13.3.3
 
 ng new <name-app>
 
 /* Select SCSS as styling when angular cli ask for it */
 
 /* Add these dependencies to the projects */
 
-npm install @dxc-technology/halstack-angular @angular/[email protected] @angular/[email protected] @angular/[email protected] [email protected] [email protected]
+npm install @dxc-technology/halstack-angular @angular/[email protected] @angular/[email protected]
+
+/* The package.json should look like this in the end */
+
+"dependencies": {
+    "@angular/animations": "~13.2.0",
+    "@angular/cdk": "^13.3.4",
+    "@angular/common": "~13.2.0",
+    "@angular/compiler": "~13.2.0",
+    "@angular/core": "~13.2.0",
+    "@angular/forms": "~13.2.0",
+    "@angular/material": "^13.3.4",
+    "@angular/platform-browser": "13.2.5",
+    "@angular/platform-browser-dynamic": "13.2.5",
+    "@angular/router": "~13.2.0",
+    "@dxc-technology/halstack-angular": "latest",
+    "rxjs": "6.6.7",
+    "tslib": "^2.0.0",
+    "zone.js": "^0.11.4"
+},
+"devDependencies": {
+    "@angular-devkit/build-angular": "~13.2.6",
+    "@angular/cli": "~13.2.6",
+    "@angular/compiler-cli": "~13.2.0",
+    "@types/jasmine": "~3.10.0",
+    "@types/node": "^12.11.1",
+    "jasmine-core": "~4.0.0",
+    "karma": "~6.3.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.1.0",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "~1.7.0",
+    "typescript": "~4.5.2"
+}

projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-ts.properties

@@ -1,5 +1,8 @@
 {
   "compilerOptions": {
+    // these are required to avoid an error with dayjs
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
     // ...
     // paths are relative to `baseUrl` path.
     "paths": {

projects/dxc-ngx-cdk-site/src/app/components/overview/overview-install/overview-install.component.html

@@ -1,16 +1,12 @@
 <div class="section">
   <dxc-heading [level]="3" weight="normal" text="Install"></dxc-heading>
   <p>
-    DXC Angular Components is a library made for Angular applications. In order
+    DXC Angular Components is a library made for Angular 13 applications. In order
     to use it, you need to include it in an existing Angular project.
   </p>
   <p>
-    If you are creating a Angular application from scratch, we recommend take a look at this boiler plate. It's a clean app consuming halstack angular cdk.
-
-    <a href="https://github.com/mawelCaballero/halstack-angular-boiler-plate" target="_blank"
-      >Clean example app</a
-    >
-    otherwise follow the next steps to install from scratch.
+    If you are creating a Angular application from scratch, we recommend to
+    follow the next steps to install from scratch.
   </p>
   <p>
     DXC Angular Components is distributed as an npm package. To use it in an
@@ -48,7 +44,8 @@
     <a
       href="https://angular.io/guide/creating-libraries#use-typescript-path-mapping-for-peer-dependencies"
       target="_blank"
-      >Angular</a>
+      >Angular</a
+    >
     does it?
   </p>
   <app-code-playground [code]="tsCode" type="CONSOLE"> </app-code-playground>
@@ -61,15 +58,20 @@
   ></dxc-heading>
 
   <p>
-    The cdk uses a Dxc Halstack styling so if it's not added, the components will not
-    work as expected.
+    The cdk uses a Dxc Halstack styling so if it's not added, the components
+    will not work as expected.
   </p>
   <p>
     Furthermore, it is mandatory to add in your angular.json the library assets
     as well as the theme from Halstack Angular:
   </p>
   <app-code-playground [code]="assetsCode" type="CONSOLE">
   </app-code-playground>
+  <p>
+    Some components make use of some material styling so its is neccessary to add this line to style.scss:
+  </p>
+  <app-code-playground [code]="materialThemeCode" type="CONSOLE">
+  </app-code-playground>
   <p>
     Lastly, it is also needed our ThemeModule in your app so our default theme
     can be applied with the theme directive. For more information, please go to

projects/dxc-ngx-cdk-site/src/app/components/overview/overview-install/overview-install.component.ts

@@ -17,6 +17,7 @@ export class OverviewInstallComponent implements OnInit {
   yarnCode: string;
   assetsCode: string;
   tsCode: string;
+  materialThemeCode: string;
   files: Array<string>;
 
   constructor(
@@ -27,12 +28,14 @@ export class OverviewInstallComponent implements OnInit {
       "overview/overview-install/overview-install-yarn",
       "overview/overview-install/overview-install-assets",
       "overview/overview-install/overview-install-ts",
+      "overview/overview-install/overview-install-materialTheme"
     ];
 
     this.npmCode = "Loading...";
     this.yarnCode = "Loading...";
     this.assetsCode = "Loading...";
     this.tsCode = "Loading ...";
+    this.materialThemeCode = "Loading ...";
   }
   ngOnInit() {
     this.getExampleFiles();
@@ -46,6 +49,7 @@ export class OverviewInstallComponent implements OnInit {
         this.yarnCode = response[1];
         this.assetsCode = response[2];
         this.tsCode = response[3];
+        this.materialThemeCode = response[4];
       });
   }
 }