Develop Reference

node.js markdown blog : when edit blog'a article have blank space

the tutorial video: https://www.youtube.com/watch?v=1NrHkjlWVhM&t=2693s
github: https://github.com/godzillalogan/markdownblog
my blog: https://gentle-inlet-86339.herokuapp.com/
I have a blog in node.js and framework express.js, i use the way of the the tutorial video to install the markdown blog. but have a problem.
original the article in my blog
but when every time I edit the article
It always has blank space in front of every paragraph.
I don't know if it's my way of store the article is wrong or
using HTML textarea has problem.
thank you for your help
edit articles in routes/modules/admin.js:
//edit article
router.put('/articles/:id', upload.single('image'), async (req, res)=>{
try{
const _id = req.params.id
const { title,description,markdown,category } = req.body
const { file } = req // 把檔案取出來
const article = await Article.findOne({ _id})
if (file){
// const filePath = await imgurFileHandler(file) // 把檔案傳到 file-helper 處理
imgur.setClientID(IMGUR_CLIENT_ID)
imgur.upload(file.path,async (err, img) =>{
// Article.update({...req.body, image: file ? img.data.link: article.image})
article.title = title
article.description = description
article.markdown = markdown
article.category = category
article.image = img.data.link
await article.save()
})
}else{
article.title = title
article.description = description
article.markdown = markdown
article.category = category
await article.save()
}
res.redirect('/admin/articles')
}catch(e){
console.log(e)
res.redirect(`/admin/articles`)
}
// const {title,description,markdown} = req.body //和new一樣才能將markdown轉成html
// Article.create({...req.body})
// res.redirect('/')
})
views/edit:
<div class="container">
<div class="row grid">
<div>
<nav class="userSidebar fixed mt-3">
<div class="buttonList mt-5">
<div class="navItem index d-flex mb-4">
<div class="icon d-flex align-items-center color-blue">
<i class="fas fa-home my-auto"></i>
</div>
<a href="/admin/articles" class="btn">
<span class="fs-5 fw-bolder color-blue">文章清單</span>
</a>
</div>
<div class="navItem userProfile d-flex mb-4">
<div class="icon d-flex align-items-center">
<i class="fas fa-users"></i>
</div>
<a href="/admin/users" class="btn">
<span class="fs-5 fw-bolder">使用者列表</span>
</a>
</div>
<div class="navItem userProfile d-flex mb-4">
<div class="icon d-flex align-items-center">
<i class="fas fa-users"></i>
</div>
<a href="/admin/categories" class="btn">
<span class="fs-5 fw-bolder">種類列表</span>
</a>
</div>
<a href="/admin/logout" class="btn">
<span class="fs-5 fw-bolder">登出</span>
</a>
</div>
</nav>
</div>
<div>
<h1 class="mb-4">Edit Article</h1>
<form action="/admin/articles/{{article._id}}?_method=PUT" method="POST" enctype="multipart/form-data">
{{>formFields}}
</form>
</div>
</div>
</div>
views/partials/formFields.hbs:
<div class="form-group mb-3">
<label for="title">Title</label>
<input require value="{{article.title}}" type="text" name="title" id="title" class="form-control">
</div>
<div class="form-row mb-3">
<label class="form-label" for="image">Image</label>
<input class="form-control" type="file" class="form-control-file" id="image" name="image">
</div>
<div class="form-group mb-3">
<label for="category">category</label>
<select name="category" id="category" class="form-control">
{{#each categories}}
<option value="{{this.categoryEnName}}"
{{#ifCond this.categoryName ../article.category}}
selected
{{/ifCond}}>
{{this.categoryName}}
</option>
{{/each}}
</select>
</div>
<div class="form-group mb-3">
<label for="title">Description</label>
<textarea name="description" id="description" class="form-control">{{article.description}}</textarea>
</div>
<div class="form-group">
<label for="markdown">Markdown</label>
<textarea required name="markdown" id="markdown" class="form-control" rows="15" cols="80">{{article.markdown}}</textarea>
</div>
Cancel
<button type="submit" class="btn btn-primary mt-3">Save</button>

Getting error in console Can't bind to 'ngif' since it isn't a known property of 'div' in angular app

After calling ngif statement for edit state i get this error in console
Can't bind to 'ngif' since it isn't a known property of 'div'
I must mention that my first condition works well and that i have imported BrowserModule and CommonModule to app.module.ts
This is my tasks.component.html
<div class="container mt-5">
<div *ngIf ="tasks?.length > 0; else noTasks" >
<ul class="list-group" >
<li *ngFor = "let task of tasks" class="list-group-item">
<div class="row">
<div class="col">
<strong> {{task.title}}: </strong> {{task.description}}
</div>
<div class="col-sm-auto">
<button (click)="editTask($event, task)" class="btn btn-link"> Edit </button>
</div>
<div class="col-sm-auto">
<button (click)="deleteTask($event, task)" class="btn btn-link"> Delete </button>
</div>
</div>
<div *ngif="editState && taskToEdit.id == task.id">
<form (ngSubmit)="udpateTask(task)">
<div class="row">
<div class="col-6">
<div class="form-group">
<label>Task title</label>
<input type="text" [(ngModel)]="task.title" name="title" class="form-control">
</div>
</div>
<div class="col-6">
<div class="form-group">
<label>Task Description</label>
<input type="text" [(ngModel)]="task.description" name="description" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<input type="submit" class="btn btn-dark" value="Update Task">
</div>
</div>
</form>
</div>
</li>
</ul>
</div>
<ng-template #noTasks>
<h5>There are no tasks to list</h5>
</ng-template>

This line *ngif="editState && taskToEdit.id == task.id" contains a typo, and should read *ngIf. Please check.

i am finding this.myScrollContainer.nativeElement.scrollHeight but getting Cannot read property 'nativeElement' of undefined

When i open this template I need to find out one div scrollHeight from the code this.myScrollContainer.nativeElement.scrollHeight. But I am getting nativeElement. Actually div scroll is coming top to bottom. What I need to do is scroll bottom to top. Does anyone know what is the issue?
<ng-template #ModalReviewHistory>
<div class="modal-header">
{{ "workFlowCommentsHistory.commentModalTitle" | translate }}
<button
type="button"
class="close pull-right"
aria-label="Close"
(click)="modalRef.hide()"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body scroll" #scrollMe >
<div class="container box" *ngIf="commentHistory === null">
{{ "workFlowCommentsHistory.noCommentMessage" | translate }}
</div>
<!-- <ul class="p-0"> -->
<div class="round" *ngFor="let comments of commentHistory; let i = index">
<div class="bs-callout bs-callout-default mb-0">
<div class="talktext pt-1">
<div class="row">
<div class="col-4 font-12">
<strong>{{ comments?.creator?.firstName }}</strong> |
<strong>{{ comments.role }}</strong>
</div>
<div class="col-5 font-12">
{{ comments?.creator?.createdAt | myDateFormat }}
</div>
<!-- <div class="col-5"></div> -->
<div class="col-2 text-left">
<div
*ngIf="
comments.formKey === 'edjw:panelReviewTask' ||
comments.consolidatedTask === true
"
>
<button
(click)="clickViewMore(comments.id, FeedbackModel)"
type="button"
class="btn btn-outline-primary font-12 btn-sm"
>
{{ "workFlowCommentsHistory.viewBtn" | translate }}
</button>
</div>
</div>
<div class="col-1 text-right">
<button
(click)="onClickReplyToComment(i, comments)"
class="btn btn-outline-primary btn-sm"
title="Reply"
>
<i class="fa fa-reply text-info"></i>
</button>
</div>
</div>
<div class="row pl-3">
{{ comments?.contents }}
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-3"></div>
<div *ngIf="comments.repliesPost" class="col-9">
<div
*ngFor="let reply of comments.repliesPost; let index = index"
[ngClass]="{
'bs-callout bs-callout-default margin-5-left':
reply.isCommentOwner,
'bs-callout-right bs-callout-default-right margin-6-right': !reply.isCommentOwner
}"
>
<!-- <p
*ngIf="
lineCommentReplyEditIndex.replyIndex !== index ||
lineCommentReplyEditIndex.commentIndex !== commentIndex
"
[innerHTML]="reply.contents"
></p> -->
<div class="row">
<div class="col-9 font-12">
<strong>
{{ reply.creator }} |
{{ reply.createdAt | myDateFormat }}</strong
>
</div>
</div>
<div class="row pl-3 py-2">
{{ reply?.contents }}
</div>
</div>
</div>
</div>
<div *ngIf="lineCommentReplyIndex === i" class="row">
<form [formGroup]="lineNumberReplyCommentForm" novalidate>
<div class="col-md-1"></div>
<div class="col-md-9">
<div class="form-group">
<textarea
placeholder="Your comment goes here..."
pInputTextarea
formControlName="comment"
class="form-control"
rows="2"
style="width: 350px;"
></textarea>
<div
class="ui-message ui-messages-error ui-corner-all"
*ngIf="
lineNumberReplyCommentForm.controls['comment'].invalid &&
lineNumberReplyCommentForm.controls['comment'].dirty
"
>
<i class="fa fa-close"></i>
<span
*ngIf="
lineNumberReplyCommentForm.controls['comment'].errors
.required
"
>{{
"lineComments.viewLineComment.replyCommentValidation"
| translate
}}</span
>
</div>
</div>
</div>
<div class="col-md-2">
<button
(click)="submitlineNumberReplyCommentForm()"
class="btn btn-primary"
>
{{ "lineComments.viewLineComment.replyBtn" | translate }}
</button>
</div>
</form>
</div>
</div>
<!-- </ul> -->
</div>
<div class="modal-footer">
<button
(click)="modalRef.hide()"
type="button"
class="btn btn-outline-primary"
>
{{ "prReviewResponseModal.cancel" | translate }}
</button>
</div>
</ng-template>
#ViewChild('scrollMe') myScrollContainer: ElementRef;
#ViewChild('ModalReviewHistory') ModalReviewHistory: ElementRef;
onShowReviewerList() {
this.modalRef = this.modalService.show(this.ModalReviewHistory,
Object.assign({}, {
class: 'gray modal-lg'
},
this.config));
this.scrollToBottom();
}
scrollToBottom() {
this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
}

<ng-template> isn't a physical element in the DOM. Converting this to a <div> or something that is created in the DOM should fix your problem.
For example:
<div #ModalReviewHistory>
<!-- modal stuff here -->
</div>
You can diagnose this by inspecting the HTML that gets created. You will see that <ng-template> doesn't exist.

Edit fields in angularjs

Hi I am a beginner in Angularjs and was trying to implement edit of a field and trying to save the data..
The below is the html:-
<div class="row" ng-if="showme=='false'">
<div class="myaddress">
<div class="card-addresses">
<div class="card card-address" ng-repeat="address in addresses" ng-click="selectAddress(address)" ng-class="{active : selectedAddress === address}">
<div class="overlay">
<div class="icon icon-approved"></div>
</div>
<div class="card-header">
<div class="pull-left"><span>{{address.label}}</span></div>
<div class="pull-right"><i class="fa fa-pencil" ng-click="editAddress(address)"></i>
<div class="editpopup editpopup-{{istrue}}">
<p>edit id:
<input type="text" ng-model="address.street"/>
</p>
<p>edit pname:
<input type="text" ng-model="address.station"/>
</p>
<button ng-click="save()">save</button>
<button ng-click="closepopup()">cancel</button>
</div> <i class="fa fa-trash" ng-click="delAddress(address)"></i>
</div>
</div>
<div class="card-block">
<p>{{address.building}}</p>
<p>{{address.street}}</p>
<p>{{address.station}} {{address.city}} - {{address.pincode}}</p>
</div>
<div class="card-footer"><span>Default</span></div>
</div>
</div>
<button class="btn btn-success btn-block" type="button" ng-click="addAddress()">Add New Address</button>
</div>
The below is the js:-
$scope.editrow=function($index){
$scope.istrue=true;
$scope.$index = $index;
angular.copy($scope.address[$index], $scope.address);
}
$scope.closepopup=function(){
$scope.istrue=false;
}
$scope.save = function() {
$scope.istrue=false;
angular.copy($scope.addresses, $scope.addresses[0])
Address.save($scope.addresses)
};
I am trying to fetch and save the data in the service Address which gets getting the value from the database

You need store edit state in each address
So html
<div class="row" ng-if="showme=='false'">
<div class="myaddress">
<div class="card-addresses">
<div class="card card-address" ng-repeat="address in addresses" ng-click="selectAddress(address)" ng-class="{active : selectedAddress === address}">
<div class="overlay">
<div class="icon icon-approved"></div>
</div>
<div class="card-header">
<div class="pull-left"><span>{{address.label}}</span></div>
<div class="pull-right"><i class="fa fa-pencil" ng-click="editAddress(address)"></i>
<div class="editpopup editpopup-{{address.istrue}}">
<p>edit id:
<input type="text" ng-model="address.street"/>
</p>
<p>edit pname:
<input type="text" ng-model="address.station"/>
</p>
<button ng-click="save(address)">save</button>
<button ng-click="closepopup(address)">cancel</button>
</div> <i class="fa fa-trash" ng-click="delAddress(address)"></i>
</div>
</div>
<div class="card-block">
<p>{{address.building}}</p>
<p>{{address.street}}</p>
<p>{{address.station}} {{address.city}} - {{address.pincode}}</p>
</div>
<div class="card-footer"><span>Default</span></div>
</div>
</div>
<button class="btn btn-success btn-block" type="button" ng-click="addAddress()">Add New Address</button>
</div>
And js
$scope.editrow=function($index){
$scope.istrue=true;
$scope.$index = $index;
//angular.copy($scope.address[$index], $scope.address); // why you need this?
}
$scope.closepopup=function(address){
address.istrue=false;
}
$scope.save = function() {
address.istrue=false;
// angular.copy($scope.addresses, $scope.addresses[0])// why you need this?
Address.save($scope.addresses)
};

Toggle Disabled to Unable Text Fields in Sections

I am working on a new concept to allow Users to made update their account profile without the need to reload the screen to allow for updates.
Currently, I have two sections that will display the information they already submitted. By default, all field are disabled. Each section contain an "Edit" button to allow for modifications.
The problem that I am facing is that my "Edit" buttons are enabling editing on all sections, not their own section.
Toggle Disabled fields for editing in Sections
Here's the HTML code:
<div class="container">
<p>User should use the "Edit" button to correct any information separated in the form sections, individually.
User should be allowed to submit individual sections with updated information.</p>
<br />
<form name="ReviewInformation" method="post" class="clearfix">
<section id="NameConfirmation" style="background-color: #F1F3F2; border-radius: 8px; clear: both;" class="border-gray">
<!-- FIRST AND NAME SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-users"></i> First & Last Name Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserEmail" name="UserEmail" class="form-control" placeholder="First Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserPhone" name="UserPhone" class="form-control" placeholder="Last Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- /FIRST AND LAST NAME SECTION/ -->
</section>
<div class="col-lg-12 spacer"></div>
<hr class="horizontal-line" />
<div class="spacer"></div>
<section id="EmailPhoneConfirmation" style="background-color: #E5F2F5; border-radius: 8px; clear: both;" class="border-gray">
<!-- EMAIL AND PHONE SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-envelope"></i> Email & Phone# Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="emailaccount#isp.com" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="801-999-9999" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- EMAIL AND PHONE SECTION -->
</section>
<div class="clearfix"></div>
<hr />
<div class="clearfix"></div>
<div class="align-text-center">
<button type="sumbit" id="myForm" class="btn btn-success">Submit Form</button>
</div>
</form>
</div>
Here's the JS:
<script>
(function($) {
$.fn.toggleDisabled = function() {
return this.each(function() {
var $this = $(this);
if ($this.attr('disabled')) $this.removeAttr('disabled');
else $this.attr('disabled', 'disabled');
});
};
})(jQuery);
$(function() {
//$('input:editlink').click(function() {
$('input:button').click(function() {
$('input:text').toggleDisabled();
});
});
</script>
Here's the DEMO: https://jsfiddle.net/UXEngineer/7tft16pt/35/
So, I am trying to get individual editing enable only the section they are associated with.
Can anyone help with this issue? I would appreciate any help, thanks!

You can use:
$(function() {
$('input:button').click(function() {
$(this).closest('.col-lg-12').next().find('input:text').toggleDisabled();
});
});
Demo: https://jsfiddle.net/7tft16pt/38/
Use closest() -> https://api.jquery.com/closest/ , and next() -> https://api.jquery.com/next/