> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-audit-mechanical-fixes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Multi Tab Chat UI Guide

> Multi Tab Chat UI Guide — CometChat integration guide.

This guide will help you achieve a tabbed layout (aka Multi-Tab Chat UI) of the components available in CometChatUIKit for Angular.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-mechanical-fixes/TIjyXiMHb2A7oH7j/images/f01f9f26-multi_tab_ui_web_screens-6e55dde4a0c3a2ccdd51a6a3ecf10627.png?fit=max&auto=format&n=TIjyXiMHb2A7oH7j&q=85&s=7537b94ef13b6a806f88825a8a33bf73" width="3600" height="2400" data-path="images/f01f9f26-multi_tab_ui_web_screens-6e55dde4a0c3a2ccdd51a6a3ecf10627.png" />
</Frame>

We’ll use the [CometChatConversationsWithMessages](/ui-kit/angular/v4/conversations-with-messages), [CometChatUsersWithMessages](/ui-kit/angular/v4/users-with-messages), and [CometChatGroupsWithMessages](/ui-kit/angular/v4/groups-with-messages) components and launch them as individual tab items within the tabbed layout.

<Note>
  We recommend that you read the [Key Concepts](/fundamentals/key-concepts) , follow the guidelines, and also take the time to familiarise yourself with the library's [components](/ui-kit/angular/v4/components-overview).
</Note>

Step 1: Create a new component CometChatUI

<Tabs>
  <Tab title="cometchat-ui.component.ts">
    ```ts theme={null}
    import { Component, HostListener, OnInit, TemplateRef, ViewChild } from '@angular/core';
    import { CometChatTabItem } from '@cometchat/chat-uikit-angular';

    @Component({
      selector: 'app-cometchat-ui',
      templateUrl: './cometchat-ui.component.html',
      styleUrls: ['./cometchat-ui.component.scss']
    });

    export class CometchatUiComponent implements OnInit {


    }
    ```
  </Tab>
</Tabs>

Step 2: Include the Tabs component from the UI Kit and include the ConversationsWithMessages, UsersWithMessages, GroupsWithMessages components. We'll also apply some styling to the tab items.

<Tabs>
  <Tab title="cometchat-ui.component.ts">
    ```ts theme={null}
    import {
      Component,
      HostListener,
      OnInit,
      TemplateRef,
      ViewChild,
    } from "@angular/core";
    import { BaseStyle } from "@cometchat/uikit-elements";
    import { TabItemStyle } from "@cometchat/uikit-shared";
    import { CometChatTabItem } from "@cometchat/chat-uikit-angular";

    export class CometchatUiComponent implements OnInit {
      //access the refs using view child
      @ViewChild("chatsRef", { static: false }) chatsRef!: TemplateRef<any>;
      @ViewChild("usersRef", { static: false }) usersRef!: TemplateRef<any>;
      @ViewChild("groupsRef", { static: false }) groupsRef!: TemplateRef<any>;

      public tabsStyle: BaseStyle = {
        border: "1px solid grey",
      };
      public tabs!: CometChatTabItem[]; //array of tabs item

      //Styling tab items
      public tabItemStyle: TabItemStyle = new TabItemStyle({
        height: "fit-content",
        width: "67px",
        background: "white",
        activeBackground: "white",
        titleTextColor: "RGBA(20, 20, 20, 0.46)",
        titleTextFont: "400 13px Inter",
        iconTint: "RGBA(20, 20, 20, 0.46)",
        activeIconTint: "RGB(51, 153, 255)",
        activeTitleTextColor: "RGB(51, 153, 255)",
        activeTitleTextFont: "RGB(51, 153, 255)",
      });

      //create an array of tabs item
      ngAfterViewInit() {
        setTimeout(() => {
          this.tabs = [
            {
              childView: this.chatsRef,
              title: "chats",
              id: "chats",
              iconURL: "assets/chats.svg",
              style: this.tabItemStyle,
            },
            {
              childView: this.usersRef,
              title: "users",
              id: "users",
              iconURL: "assets/user.svg",
              style: this.tabItemStyle,
            },
            {
              childView: this.groupsRef,
              title: "groups",
              iconURL: "assets/group.svg",
              id: "groups",
              style: this.tabItemStyle,
            },
          ];
        }, 0);
      }
    }
    ```
  </Tab>

  <Tab title="cometchat-ui.component.html">
    ```html theme={null}
    <cometchat-tabs [tabs]="tabs" [tabsStyle]="tabsStyle"></cometchat-tabs>

    <ng-template #chatsRef>
      <cometchat-conversations-with-messages
        [isMobileView]="isMobileView"
      ></cometchat-conversations-with-messages>
    </ng-template>

    <ng-template #usersRef>
      <cometchat-users-with-messages
        [isMobileView]="isMobileView"
      ></cometchat-users-with-messages>
    </ng-template>

    <ng-template #groupsRef>
      <cometchat-groups-with-messages
        [isMobileView]="isMobileView"
      ></cometchat-groups-with-messages>
    </ng-template>
    ```
  </Tab>
</Tabs>

Step 3: We'll now set the isMobileView prop to true/false when the window resizes, so that the components will change to a mobile or desktop view accordingly.

<Tabs>
  <Tab title="cometchat-ui.component.ts">
    ```ts theme={null}
    import { Component, HostListener, OnInit, TemplateRef, ViewChild } from '@angular/core';
    import { BaseStyle } from '@cometchat/uikit-elements';
    import { TabItemStyle } from '@cometchat/uikit-shared';
    import { CometChatTabItem } from '@cometchat/chat-uikit-angular';

    export class CometchatUiComponent implements OnInit {

      public innerWidth!: number;
      public isMobileView!: boolean;

    	//access the refs using view child
    	@ViewChild("chatsRef", { static: false }) chatsRef!: TemplateRef<any> ;
    	@ViewChild("usersRef", { static: false }) usersRef!: TemplateRef<any>;
    	@ViewChild("groupsRef", { static: false }) groupsRef!: TemplateRef<any>;

    	public tabs!:CometChatTabItem[]; //array of tabs item

      //Styling tab items
      public tabItemStyle:TabItemStyle = new TabItemStyle({
        height: "fit-content",
        width: "67px",
        background: "white",
        activeBackground: "white",
        titleTextColor: "RGBA(20, 20, 20, 0.46)",
        titleTextFont: "400 13px Inter",
        iconTint: "RGBA(20, 20, 20, 0.46)",
        activeIconTint: "RGB(51, 153, 255)",
        activeTitleTextColor: "RGB(51, 153, 255)",
        activeTitleTextFont: "RGB(51, 153, 255)",
      });

    	//updating mobile view and desktop view
    	ngOnInit(): void {
    		this.onResize();
    	}

      //create an array of tabs item
      ngAfterViewInit() {
        setTimeout(() => {
           this.tabs = [
             {
               childView:this.chatsRef,
               title:"chats",
               id:"chats",
               iconURL:"assets/chats.svg",
               style:this.tabItemStyle
             },
             {
               childView:this.usersRef,
               title:"users",
               id:"users",
               iconURL:"assets/user.svg",
               style:this.tabItemStyle
             },
             {
             childView:this.groupsRef,
             title:"groups",
             iconURL:"assets/group.svg",
             id:"groups",
             style:this.tabItemStyle
             }
           ]
         },0);

       }

    	//host listener fo
     	@HostListener("window:resize", []);
    	onResize(): void {
        try {
        	this.innerWidth = window.innerWidth;
        if (
        (this.innerWidth as any) >=  "320" &&
        (this.innerWidth as any) <=  "767"
        ) {
        	this.isMobileView = true
        } else {
        	this.isMobileView = false
        }
        } catch (error) {}
    	}

    }
    ```
  </Tab>
</Tabs>

Step 4: Import the CometChatUI component into your App component.

<Tabs>
  <Tab title="app.module.ts">
    ```ts theme={null}
    import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
    import { BrowserModule } from "@angular/platform-browser";
    import {
      CometChatConversationsWithMessages,
      CometChatGroupsWithMessages,
      CometChatUsersWithMessages,
    } from "@cometchat/chat-uikit-angular";

    @NgModule({
      declarations: [AppComponent, CometchatUiComponent],
      imports: [
        BrowserModule,
        CometChatTabs,
        CometChatConversationsWithMessages,
        CometChatGroupsWithMessages,
        CometChatUsersWithMessages,
      ],
      providers: [],
      bootstrap: [AppComponent],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    })
    export class AppModule {}
    ```
  </Tab>
</Tabs>

You can now see chats, users and group components each as tab items. This is how you can launch CometChat UIKit’s individual component in a tabbed layout. 🎉

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-mechanical-fixes/R68qChTpDg6vLLxX/images/6a875a63-wm2swjlupe5cqqit0xzdw5r4gydv4bkt46lve90x91td1k7k3efognoyr1dig5t7-740e82849e7c625d511101a424f0501f.png?fit=max&auto=format&n=R68qChTpDg6vLLxX&q=85&s=3b85bc7d0c2ab7bd092ef26a17dddedb" width="1620" height="1014" data-path="images/6a875a63-wm2swjlupe5cqqit0xzdw5r4gydv4bkt46lve90x91td1k7k3efognoyr1dig5t7-740e82849e7c625d511101a424f0501f.png" />
</Frame>