Web Development

<div class="content">
		
		<?php
		$result = mysqli_query($con, "SELECT * FROM singles ORDER BY sales DESC;");

		$produceByType = array();

		while ($row = mysqli_fetch_array($result)) {
    		$produceByType[ $row['title'] ][] = $row;
		}
		?>

		<table>
		<?php
		$counter=1;

		foreach ($produceByType as $title => $produce):
		?>
    		<tr>
        		<th colspan="9"></th>
    		</tr>
    		<?php
    		foreach ($produce as $row): ?>
        		<tr class="rowHolder">
            		<td class="number"><?= $counter?></td>
            		<td class="activity"><img src="<?php echo $row['activity'] ?>" ?></td>
            		<td class="artwork"><img src="<?php echo $row['artwork'] ?>" ?></td>
            		<td style="display:inline-block;"class="title"><?= $row['title'] ?></td>
            		<td style="display:block;"class="artist"><?= $row['artist'] ?></td>
            		<td style="width:20px;"class="buttonExpand"><img src="assets/images/expand.png"></td>
            		
        		</tr>
        		<tr class="additionalHolder">
					
					<td class="lastWeek"><?= $row['last'] ?></td>
            		<td class="peak"><?= $row['peak'] ?></td>
            		<td class="woc"><?= $row['woc'] ?></td>
            		<td class="sales"><?= $row['sales'] ?></td>
            		<td class="tSales"><?= $row['tSales'] ?></td>
        		</tr>
    		<?php
    		$counter++;
    		endforeach;
		endforeach; ?>
		</table>
</div>

*{
    font-family: "Poppins", sans-serif;
}

body {
    margin: 0;
    padding: 0; 
}
.header {
    padding: 25px 0;
    background-color: #000;
}


.bblogo img{
    display: block;
    width:200px;
    margin-left: auto;
    margin-right: auto;
}

.nav {
    padding: 15px 0;
    background-color: #333333;
    position: -webkit-sticky;
}

.nav .item{
    text-decoration: none;
    color: white;
    padding-right: 30px;
}

.nav .item:hover{
    text-decoration: underline;
}

.nav .active{
    color: #6b6b6b;
    text-decoration: none;
    padding-right: 30px;
}

.header, .nav {
    text-align: center;
    color: #fff;
}
.content {
    width: 600px;
    margin: 10px auto 100px;
}

.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  border-top: 0;
}

.artwork img{
  width: 110px;
}

.activity img{
  width:40px;
}

.buttonExpand img{
  width: 20px;
}

.content{
  text-align: center;
}

.title{
  width: 30px
  border-top: 20px;
}

Date: 2018-07-23T18:06:06.906Z
Hash: 4f65682650985a01a753
Time: 10797ms
chunk {main} main.js, main.js.map (main) 1.91 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 674 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 325 kB [initial] [rendered]

ERROR in src/app/app.service.ts(19,6): error TS2339: Property 'map' does not exist on type 'Observable<Object>'.
src/app/app.service.ts(28,17): error TS2339: Property 'map' does not exist on type 'Observable<Object>'.
src/app/app.service.ts(35,6): error TS2339: Property 'map' does not exist on type 'Observable<Object>'.
src/app/app.service.ts(41,17): error TS2339: Property 'map' does not exist on type 'Observable<Object>'.
src/app/app.service.ts(47,10): error TS2339: Property 'map' does not exist on type 'Observable<Object>'.

app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
  it(`should have as title 'app'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app');
  }));
  it('should render title in a h1 tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
  }));
});

app.component.ts

import {Component} from '@angular/core';

@Component({
  selector:'app-root',
  templateUrl:'./app.component.html',
  styleUrls:['./app.component.css']
})

export class AppComponent{}

<big></big></big>

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';

//import 'rxjs/Rx';
import { map } from "rxjs/operators";


@Injectable()
export class AppService {
    //URL for CRUD operations
    articleUrl = "http://localhost:3000/data";
    //Create constructor to get Http instance
    constructor(private http:HttpClient) { 
    }
    //Fetch all articles
    getAllArticles(): Observable<any[]> {
        return this.http.get(this.articleUrl)
	   .map(this.extractData)
	   .catch(this.handleError);

    }
	
    //Create article
    createArticle(article: any):Observable<number> {
	let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
        return this.http.post(this.articleUrl, article)
               .map(this.extractData)
               .catch(this.handleError);
    }
    //Fetch article by id
    getArticleById(articleId: string): Observable<any> {
	console.log(this.articleUrl +"/"+ articleId);
	return this.http.get(this.articleUrl +"/"+ articleId)
	   .map(this.extractData)
	   .catch(this.handleError);
    }	
    //Update article
    updateArticle(article: any):Observable<number> {
        return this.http.put(this.articleUrl +"/"+ article.id, article)
               .map(this.extractData)
               .catch(this.handleError);
    }
    //Delete article	
    deleteArticleById(articleId: string): Observable<number> {
	return this.http.delete(this.articleUrl +"/"+ articleId)
	       .map(this.extractData)
               .catch(this.handleError);
    }	
    private extractData(res: Response) {
	let body = res;
        return body;
    }
    private handleError (error: Response | any) {
	console.error(error.message || error);
	return Observable.throw(error.status);
    }
} 

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
  it(`should have as title 'app'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app');
  }));
  it('should render title in a h1 tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
  }));
});

I have following line of HTML codes and I would like to show or display only four lines of description in each card and rest text would display when I click on "readmore" button, which probably render in different page/pages. Therefore how to limit the lines or characters in card-text in bootstrap. Help is appreciated:-

<div class="col-4 ml-2" *ngFor="let t of techBlogs">
            <div class="card shadow">
              <div class="card-body">
                <h2 class="card-title">{{t.title}}</h2>
                <h4 class="card-text">{{t.name}}</h4>
                <h4 class="card-text text-muted" id="run">{{t.postCreatedDate | date}}</h4>
                <h4 class="card-text">Description: {{t.description}}
                  <a href="#" class="btn btn-success btn-sm">read more..</a>
                </h4>
              </div>
            </div>
          </div>