diff --git a/package-lock.json b/package-lock.json
index 3d67f9b64..49fd193dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -76,7 +76,7 @@
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "^2.0.0",
         "ngx-monaco-editor": "^12.0.0",
-        "prettier": "^2.7.1",
+        "prettier": "^2.8.1",
         "protractor": "~7.0.0",
         "ts-node": "^10.9.1",
         "typescript": "^4.6.4"
@@ -12726,9 +12726,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
-      "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz",
+      "integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==",
       "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
@@ -25259,9 +25259,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
-      "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz",
+      "integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==",
       "dev": true
     },
     "prettier-linter-helpers": {
diff --git a/package.json b/package.json
index e6cd0fa32..b27057f32 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,7 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
     "ngx-monaco-editor": "^12.0.0",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.1",
     "protractor": "~7.0.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.6.4"
diff --git a/src/app/components/snippet-options/snippet-options.component.html b/src/app/components/snippet-options/snippet-options.component.html
index a875ea421..1a342ca83 100644
--- a/src/app/components/snippet-options/snippet-options.component.html
+++ b/src/app/components/snippet-options/snippet-options.component.html
@@ -7,7 +7,7 @@
           <anglify-icon icon="mdi-account" size="x-small"></anglify-icon> {{ activeSnippet.user_display || 'Anonymous' }}
         </div>
         <div anglifyTooltip="Last modified">
-          <anglify-icon icon="mdi-calendar" size="x-small"></anglify-icon> {{ activeSnippet.modified_date | date: 'medium' }}
+          <anglify-icon icon="mdi-calendar" size="x-small"></anglify-icon> {{ activeSnippet.modified_date | date : 'medium' }}
         </div>
         <div anglifyTooltip="Visibility"><anglify-icon icon="mdi-eye" size="x-small"></anglify-icon> {{ activeSnippet.visibility }}</div>
       </div>
diff --git a/src/app/components/snippet/snippet.component.html b/src/app/components/snippet/snippet.component.html
index 75d0738be..fa25c02c9 100644
--- a/src/app/components/snippet/snippet.component.html
+++ b/src/app/components/snippet/snippet.component.html
@@ -1,8 +1,8 @@
 <div *ngIf="activeSnippet$ | async as activeSnippet">
   <div class="label-list">
     <span *ngFor="let label of activeSnippet.labels">
-      <span class="badge bg-info" *ngIf="(labels$ | async | filterBy: ['pk']:label:[true])[0]">
-        {{ (labels$ | async | filterBy: ['pk']:label:[true])[0].name }}
+      <span class="badge bg-info" *ngIf="(labels$ | async | filterBy : ['pk'] : label : [true])[0]">
+        {{ (labels$ | async | filterBy : ['pk'] : label : [true])[0].name }}
       </span>
     </span>
   </div>
diff --git a/src/app/components/snippets/snippets.component.html b/src/app/components/snippets/snippets.component.html
index 768c4d4a9..e61f87704 100644
--- a/src/app/components/snippets/snippets.component.html
+++ b/src/app/components/snippets/snippets.component.html
@@ -3,14 +3,14 @@
     <img class="user-badge" [src]="snippet.user_avatar" alt="card image" />
     <div class="snippet">
       <h6 class="card-title">
-        {{ snippet.title | slice: 0:30 }}
+        {{ snippet.title | slice : 0 : 30 }}
         <span *ngIf="snippet.description.title > 30">...</span>
       </h6>
     </div>
   </div>
   <div class="card-text">
     <p style="line-height: 1; font-size: small">
-      {{ snippet.description | removemarkdown | slice: 0:120 }}
+      {{ snippet.description | removemarkdown | slice : 0 : 120 }}
       <span *ngIf="snippet.description.length > 120">...</span>
     </p>
   </div>
diff --git a/src/app/modals/snippet-modal/snippet-modal.component.html b/src/app/modals/snippet-modal/snippet-modal.component.html
index 16f7d65af..2cd16265a 100644
--- a/src/app/modals/snippet-modal/snippet-modal.component.html
+++ b/src/app/modals/snippet-modal/snippet-modal.component.html
@@ -77,12 +77,12 @@ <h4 class="modal-title" *ngIf="snippet">Edit snippet</h4>
                 </div>
               </div>
             </div>
-            <div *ngIf="(languages | filterBy: ['pk']:file.get('language').value:[true]).length">
+            <div *ngIf="(languages | filterBy : ['pk'] : file.get('language').value : [true]).length">
               <ngx-monaco-editor
                 style="height: 400px"
                 [options]="{
                   theme: 'vs-dark',
-                  language: (languages | filterBy: ['pk']:file.get('language').value:[true])[0].name,
+                  language: (languages | filterBy : ['pk'] : file.get('language').value : [true])[0].name,
                   scrollBeyondLastLine: false,
                   scrollbar: { alwaysConsumeMouseWheel: false }
                 }"