Guest User

Untitled

a guest
Dec 11th, 2019
79
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. ============================models.ts=========
  2.  
  3. import { BrowserModule } from '@angular/platform-browser';
  4. import { NgModule } from '@angular/core';
  5.  
  6. import { MatInputModule } from '@angular/material/input';
  7. import { MatCardModule } from '@angular/material/card';
  8. import { MatButtonModule } from '@angular/material/button';
  9. import { MatMenuModule } from '@angular/material/menu';
  10. import { MatToolbarModule } from '@angular/material/toolbar';
  11. import { AppRoutingModule } from './app-routing.module';
  12. import { AppComponent } from './app.component';
  13. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  14.  
  15. @NgModule({
  16. declarations: [
  17. AppComponent
  18. ],
  19. imports: [
  20. BrowserModule,
  21. AppRoutingModule,
  22. BrowserAnimationsModule,
  23. MatInputModule,
  24. MatCardModule,
  25. MatToolbarModule,
  26. MatButtonModule,
  27. MatMenuModule
  28. ],
  29. providers: [],
  30. bootstrap: [AppComponent]
  31. })
  32. export class AppModule { }
  33.  
  34. ============================app.html=========
  35.  
  36. <mat-toolbar class="mat-toolbar">
  37. <button class="mat-button" (onclick)="myLog();" mat-button>Home
  38. </button>
  39. </mat-toolbar>
  40.  
  41. <mat-card class="example-card">
  42. <mat-card-header>
  43. <div mat-card-avatar class="example-header-image"></div>
  44. <mat-card-title>*username*</mat-card-title>
  45. <mat-card-subtitle>*location*</mat-card-subtitle>
  46. </mat-card-header>
  47. <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  48. <mat-card-content>
  49. <p>
  50. *comment section*
  51. </p>
  52. <form class="example-form">
  53. <mat-form-field class="example-full-width">
  54. <textarea matInput placeholder="Leave a comment"></textarea>
  55. </mat-form-field>
  56. </form>
  57. </mat-card-content>
  58. <mat-card-actions>
  59. <button mat-button>LIKE</button>
  60. <button mat-button>SHARE</button>
  61. </mat-card-actions>
  62. </mat-card>
  63.  
  64. <mat-card class="example-card">
  65. <mat-card-header>
  66. <div mat-card-avatar class="example-header-image"></div>
  67. <mat-card-title>*username*</mat-card-title>
  68. <mat-card-subtitle>*location*</mat-card-subtitle>
  69. </mat-card-header>
  70. <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  71. <mat-card-content>
  72. <p>
  73. *comment section*
  74. </p>
  75. <form class="example-form">
  76. <mat-form-field class="example-full-width">
  77. <textarea matInput placeholder="Leave a comment"></textarea>
  78. </mat-form-field>
  79. </form>
  80.  
  81. </mat-card-content>
  82. <mat-card-actions>
  83. <button mat-button>LIKE</button>
  84. <button mat-button>SHARE</button>
  85. </mat-card-actions>
  86. </mat-card>
  87.  
  88. ============================app.css=========
  89.  
  90. .mat-toolbar {
  91. background: linear-gradient(to left, #e66465, #9198e5);
  92. margin-block-end: auto;
  93. margin-block-start: auto;
  94. }
  95.  
  96. .mat-button {
  97. margin-inline-start: 60px;
  98. font-size: medium;
  99. }
  100.  
  101. .example-card {
  102. margin-block-start: 25px;
  103. max-width: 400px;
  104. margin-inline-start: 480px;
  105.  
  106. }
  107.  
  108. .example-header-image {
  109. background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
  110. background-size: cover;
  111. }
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×