Regarding chat application.

Dear All,

I hope you are doing well. I have developed one small project using Angular 8 and ASP .net MVC 5 with REST API.

I want to create one component for chatting purpose only.

How can I do that using above technologies.

Thanking you in advance.

Regards.

npm install bootstrap
Register the bootstrap.min.css file in the angular.json file.
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
npm install ng2-charts chart.js --save
import { Component, } from '@angular/core';
import { ChartDataSets, ChartOptions } from 'chart.js';
import { Color, Label } from 'ng2-charts';
@Component({
selector: 'app-line-chart',
templateUrl: './line-chart.component.html',
styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent {
lineChartData: ChartDataSets[] = [
{ data: [85, 72, 78, 75, 77, 75], label: 'Crude oil prices' },
];
lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June'];
lineChartOptions = {
responsive: true,
};
lineChartColors: Color[] = [ {
borderColor: 'black',
backgroundColor: 'rgba(255,255,0,0.28)',
},
];
lineChartLegend = true;
lineChartPlugins = [];
lineChartType = 'line';}

<div class="chart-wrapper">     <canvas baseChart          [datasets]="lineChartData"          [labels]="lineChartLabels"          [options]="lineChartOptions"         [colors]="lineChartColors"          [legend]="lineChartLegend"          [chartType]="lineChartType"          [plugins]="lineChartPlugins">     canvas> div>

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mandar Shinde6y ago
Thank you so much for your reply.
0
Laxmidhar Sahoo6y ago
hey
I am sorry .Bellow link is for using mvc .I will contact you later
https://www.c-sharpcorner.com/article/chat-application-with-rabbitmq-using-asp-net-mvc/
+1
Mandar Shinde6y ago
Laxmidhar sir Thank you for reply. But I want to create message chat application not chart which is going to show on dashboard.
0
Laxmidhar Sahoo6y ago
1. npm install bootstrap
2. Register the bootstrap.min.css file in the angular.json file.
3. "styles": [
4. "node_modules/bootstrap/dist/css/bootstrap.min.css",
5. "src/styles.css"
6. ]
7. npm install ng2-charts chart.js --save
8. import { Component, } from '@angular/core';
9. import { ChartDataSets, ChartOptions } from 'chart.js';
10. import { Color, Label } from 'ng2-charts';
11. @Component({
12. selector: 'app-line-chart',
13. templateUrl: './line-chart.component.html',
14. styleUrls: ['./line-chart.component.css']
15. })
17. export class LineChartComponent {
18. lineChartData: ChartDataSets[] = [
19. { data: [85, 72, 78, 75, 77, 75], label: 'Crude oil prices' },
20. ];
21. lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June'];
22. lineChartOptions = {
23. responsive: true,
24. };
25. lineChartColors: Color[] = [ {
26. borderColor: 'black',
27. backgroundColor: 'rgba(255,255,0,0.28)',
28. },
29. ];
30. lineChartLegend = true;
31. lineChartPlugins = [];
32. lineChartType = 'line';}
<div class="chart-wrapper"> <canvas baseChart [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions" [colors]="lineChartColors" [legend]="lineChartLegend" [chartType]="lineChartType" [plugins]="lineChartPlugins"> canvas> div>
0