Category: angular6

Deploy angular app into server

1- You need to build your project using: ng build –prod If you see some problem while launching your website, maybe it is because your build is optimized and it misses some needed component. In this case, you would need to set: … “optimization”: false, … You can find this line inside: angular.json or .angular-cli.json …


How to create a new component in Angular Framework

1. Open the folder of the website on Visual Studio Code 2. In folder app create the new folder with its name (ex. policy) 3. In the folder policy, create three files for html, css and ts with (ex. policy.component.html, policy.component.css, policy.component.ts) 4. Copy a file .ts of other quite similar folder then paste to file policy.component.ts …


Install a new module in Angular

Following are steps to install a new module in Angular: Find the name of the module on Internet. Ex:  ng2-page-scroll. Then, go to its website to find its latest version. Go to package.json, modify it as follows: {   “name”: “<name>”,    …    “private”: true,    “dependencies”: {       …     …


Carousel View – Bootstrap 4 and Angular 6

You would need something like this for working with Carousel view file.component.html <div class=”carousel slide “data-ride=”carousel”>   <ngb-carousel>     <ng-template ngbSlide>        <div class=”carousel-caption”>           <h3>First slide label</h3>           <p>Text 1.</p>        </div>        <img src=”/assets/images/img1.png”/>      </ng-template>   …


Input – Bootstrap 4 & Angular 6

1.Input with place holder and search icon , as follow: <div class=”input-group search-input”>    <input type=”text” class=”form-control” placeholder=”Search…” [(ngModel)]=”filter” (keyup.enter)=”search()”>    <span class=”input-group-btn”>       <button class=”btn btn-default” type=”button” (click)=”search()”>          <i class=”fa fa-search”></i>       </button>    </span> </div>


Div – Bootstrap4 and Angular6

Button – Bootstrap 4 && Angular 6

This blog is a collection for some trick while using Bootstrap and Angular 6 1- Font awesome Icon + Text inside the button:  <a class=”btn btn-primary” [routerLink]=”[‘#’]”><i class=”fa fa-plus”></i>&nbsp;&nbsp;New profile</a>  


How to – collapse for Bootstrap 4 and Angular 6

In order to make a navbar collapse in boostrap 4 to be used with Angular 6, following things need to be done: file.html <nav class=”navbar” role=”navigation”>  <a class=”navbar-brand” href=”#” title=”GreenTSharing” target=”_blank”><img class=”logo”  src=”/assets/images/logo.png” id=”logo” /></a>   <button type=”button” class=”navbar-toggler” data-toggle=”collapse”  (click)=”isNavCollapsed = !isNavCollapsed” [attr.aria-expanded]=”!isNavCollapsed” aria-controls=”bs-example-navbar-collapse-1″ aria-label=”Toggle navigation”>     <span class=”navbar-toggler-icon”></span>   </button>   <div …