Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(chat): ability to provide template as chat title #2920

Merged
merged 8 commits into from
Nov 17, 2021
Next Next commit
feat(chat): provide custom template to title
katebatura committed Oct 31, 2021
commit cdfd2478e195dbf4222dc5aedef79d177c3fa303
36 changes: 35 additions & 1 deletion src/framework/theme/components/chat/chat.component.ts
Original file line number Diff line number Diff line change
@@ -17,6 +17,8 @@ import {
SimpleChanges,
AfterContentInit,
OnChanges,
Directive,
TemplateRef,
} from '@angular/core';

import { NbStatusService } from '../../services/status.service';
@@ -101,6 +103,15 @@ import { NbCustomMessageService } from './custom-message.service';
* </nb-chat-message> // chat message, available multiple types
* ```
*
* A custom template can be provided to title. It will be used instead of `[title]` input:
katebatura marked this conversation as resolved.
Show resolved Hide resolved
* ```ts
* <nb-chat>
* <ng-template nbChatTitle>
* Your custom template for title
* </ng-template>
* </nb-chat>
* ```
katebatura marked this conversation as resolved.
Show resolved Hide resolved
*
* Two users conversation showcase:
* @stacked-example(Conversation, chat/chat-conversation-showcase.component)
*
@@ -237,7 +248,15 @@ import { NbCustomMessageService } from './custom-message.service';
selector: 'nb-chat',
styleUrls: ['./chat.component.scss'],
template: `
<div class="header">{{ title }}</div>
<div class="header">
<ng-container *ngIf="templateTitle; else textTitleTemplate"
[ngTemplateOutlet]="templateTitle.templateRef">
</ng-container>
<ng-template #textTitleTemplate>
{{ title }}
</ng-template>
</div>

<div class="scrollable" #scrollable>
<div class="messages">
<ng-content select="nb-chat-message"></ng-content>
@@ -253,6 +272,14 @@ import { NbCustomMessageService } from './custom-message.service';
],
})
export class NbChatComponent implements OnChanges, AfterContentInit, AfterViewInit {
@ContentChild(NbChatTitleDirective)
get templateTitle(): NbChatTitleDirective { return this._templateTitle; }
set templateTitle(value: NbChatTitleDirective) {
if (value) {
this._templateTitle = value;
}
}
protected _templateTitle: NbChatTitleDirective;
katebatura marked this conversation as resolved.
Show resolved Hide resolved

@Input() title: string;

@@ -394,3 +421,10 @@ export class NbChatComponent implements OnChanges, AfterContentInit, AfterViewIn
return [];
}
}

@Directive({
selector: `[nbChatTitle]`,
})
export class NbChatTitleDirective {
katebatura marked this conversation as resolved.
Show resolved Hide resolved
constructor(public templateRef: TemplateRef<any>) {}
katebatura marked this conversation as resolved.
Show resolved Hide resolved
}
3 changes: 2 additions & 1 deletion src/framework/theme/components/chat/chat.module.ts
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@ import { NbButtonModule } from '../button/button.module';
import { NbInputModule } from '../input/input.module';
import { NbIconModule } from '../icon/icon.module';

import { NbChatComponent } from './chat.component';
import { NbChatComponent, NbChatTitleDirective } from './chat.component';
import { NbChatMessageComponent } from './chat-message.component';
import { NbChatFormComponent } from './chat-form.component';
import { NbChatMessageTextComponent } from './chat-message-text.component';
@@ -35,6 +35,7 @@ const NB_CHAT_COMPONENTS = [

const NB_CHAT_DIRECTIVES = [
NbChatCustomMessageDirective,
NbChatTitleDirective,
];

@NgModule({