<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link href="https://cdn.rawgit.com/twbs/bootstrap/v3.4.1/docs/assets/css/docs.min.css" rel="stylesheet">
<script src="./lib/main.ts"></script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
### ng2-truncate Live Demo
Repo: https://github.com/yellowspot/ng2-truncate
App Demo using angular-cli: https://github.com/yellowspot/ng2-truncate-demo
// Shim the environment
import 'core-js/client/shim';
// Angular requires Zones to be pre-configured in the environment
import 'zone.js/dist/zone';
//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app';
platformBrowserDynamic().bootstrapModule(AppModule);
//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TruncateModule } from '@yellowspot/ng-truncate';
@Component({
selector: 'my-app',
providers: [],
templateUrl: 'lib/app.html'
})
export class App {
angular: string
constructor() {
this.angular = `v${VERSION.full}`
}
}
@NgModule({
imports: [ BrowserModule, TruncateModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
<div class="container bs-docs-container">
<h1>@yellowspot/ng-truncate demo - Angular: {{ angular }}</h1>
<h4><small><a href="https://github.com/yellowspot/ng2-truncate">GitHub Repo</a></small></h4>
<div class="col-md-9">
<div class="bs-docs-section">
<h3>Character truncation</h3>
<div class="bs-example">
Truncate to 5 characters
<p>
<code class="language-html" data-lang="html"><span><span>{{</span> "123456789" | truncate : 5 <span>}}</span></span></code>
</p>
</div>
<figure class="highlight">
<pre><span>{{ "123456789" | truncate : 5 }}</span></pre>
</figure>
<div class="bs-example">
Don't truncate when text is short than limit
<p>
<code class="language-html" data-lang="html"><span><span>{{</span> "123456789" | truncate : 20 <span>}}</span></span></code>
</p>
</div>
<figure class="highlight">
<pre><span>{{ "123456789" | truncate : 20 }}</span></pre>
</figure>
<div class="bs-example">
Change ellipsis characters
<p>
<code class="language-html" data-lang="html"><span><span>{{</span> "123456789" | truncate : 5 : '.' <span>}}</span></span></code>
</p>
</div>
<figure class="highlight">
<pre><span>{{ "123456789" | truncate : 5 : '.' }}</span></pre>
</figure>
</div>
<div class="bs-docs-section">
<h3>Words truncation</h3>
<div class="bs-example">
Truncate to 3 words
<p>
<code class="language-html" data-lang="html"><span><span>{{</span> "I need to truncate on word number 3" | words : 3 <span>}}</span></span></code>
</p>
</div>
<figure class="highlight">
<pre><span>{{ "I need to truncate on word number 3" | words : 3 }}</span></pre>
</figure>
<div class="bs-example">
Change ellipsis characters
<p>
<code class="language-html" data-lang="html"><span><span>{{</span> "I need to truncate on word number 3" | words : 3 : '.' <span>}}</span></span></code>
</p>
</div>
<figure class="highlight">
<pre><span>{{ "I need to truncate on word number 3" | words : 3 : '.' }}</span></pre>
</figure>
</div>
</div>
</div>
{
"name": "@plnkr/starter-angular",
"version": "1.1.0",
"description": "ng-truncate live demo",
"dependencies": {
"@angular/common": "^9.0.0",
"@angular/compiler": "^9.0.0",
"@angular/core": "^9.0.0",
"@angular/platform-browser": "^9.0.0",
"@angular/platform-browser-dynamic": "^9.0.0",
"@yellowspot/ng-truncate": "1.5.1",
"core-js": "^2.5.5",
"rxjs": "~6.5.4",
"zone.js": "~0.10.2"
},
"main": "./lib/main.ts",
"plnkr": {
"runtime": "system",
"useHotReload": true
}
}
{
"compilerOptions": {
"experimentalDecorators": true
}
}