Angular2-cli and Bootstrap-3/4 setup

I am going to use the bootstrap's Collapse component for this tutorial. Finally it will something like this

Creating a angular-cli project

original source

prerequisites

Both the CLI and generated project have dependencies that require Node 6.9.0 or higher, together with NPM 3 or higher. You can use visual studio code as the editor

Installation angular cli

Run this code in the cmd/terminal

1	npm install -g @angular/cli

Creating a new angular project

Run this code in the cmd/terminal

1 2 3

ng new PROJECT-NAME cd PROJECT-NAME ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Setup Native Angular directives for Bootstrap

original source

Run this code in the cmd/terminal

1	npm install ngx-bootstrap --save

Add below code to your index.html file which is locate in you project's src directory.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

Implementation

Creating body component

ng g component body

Creating a component for the bootstrap collapse component

ng g component zippy

you can find API reference for the other bootstrap components in here

Add this code to the app.module.ts file.

import { CollapseModule } from 'ngx-bootstrap';

@NgModule({
  imports: [CollapseModule.forRoot(),...]
})

You can find the repository for this project in here

Add below code to the app.component.html

<app-body style="padding: 10px;">
</app-body>

We going to take the title of Collapse as a Input field so You have to import the Input  from @angular/core. Import Input  to the zippy component. Add or modify below line to the zippy.component.ts

import { Component, OnInit,Input } from '@angular/core';

Add isCollapsed boolean to track whether it's collapsed or not and add title string filed to store the title.
zippy.component.ts

public isCollapsed:boolean = true;
@Input() title:string = "";

Finally zippy.component.ts will be like this

import { Component, OnInit,Input } from '@angular/core';
@Component({
  selector: 'app-zippy',
  templateUrl: './zippy.component.html',
  styleUrls: ['./zippy.component.css'],
  
})
export class ZippyComponent implements OnInit {
 public isCollapsed:boolean = true;
  @Input() title:string = "";
  ngOnInit() {     
  }
}

lets add the collapse component to the zippy.component.html, please note that [collapse] in the line 6 this is coming from the ngx-bootstrap that we installed earlier.

1 2 3 4 5 6 7 8 9

<div class="panel panel-default" > <div class="panel-heading" (click)="isCollapsed = !isCollapsed"><b>{{title}}</b> <span style="float: right" class="glyphicon" [class.glyphicon-menu-down]="isCollapsed" [class.glyphicon-menu-up]="!isCollapsed" aria-hidden="true"></span> </div> <div [collapse]="isCollapsed" class="panel-body"> <ng-content></ng-content> </div> </div>

I am going to add some styling to to this code and finally zippy.component.html will be like this

<div class="row">
  <div class="col-sm-1"></div>
  <div class="col-sm-10">
    <div class="panel panel-default" style="margin-bottom: 0px;">
      <div class="panel-heading" (click)="isCollapsed = !isCollapsed"><b>{{title}}</b>
        <span style="float: right" class="glyphicon" [class.glyphicon-menu-down]="isCollapsed" [class.glyphicon-menu-up]="!isCollapsed"
          aria-hidden="true"></span>
      </div>
      <div [collapse]="isCollapsed" class="panel-body">
        <ng-content></ng-content>
      </div>
    </div>
  </div>
  <div class="col-sm-1"></div>
</div>

Put this code to the body.component.html. This code will give us two collapse components.

<app-zippy [title]="'Who can see my stuff?'">
    Content of who can see my stuff
</app-zippy>
<app-zippy [title]="'Who can contact me?'">
    Content of who can contact me
</app-zippy>

Now just type below command to run the Angular development server, and you can see the output from the http://localhost:4200/

ng serve